Alguns lugares parecem usar a função do controlador para lógica de diretiva e outros usam o link. O exemplo de guias na página inicial angular usa controlador para um e link para outra diretiva. Qual é a diferença entre os dois?
Alguns lugares parecem usar a função do controlador para lógica de diretiva e outros usam o link. O exemplo de guias na página inicial angular usa controlador para um e link para outra diretiva. Qual é a diferença entre os dois?
Respostas:
Vou expandir um pouco sua pergunta e também incluir a função de compilação.
função de compilação - use para manipulação DOM do modelo (ou seja, manipulação do elemento tElement = template), portanto, manipulações que se aplicam a todos os clones DOM do modelo associado à diretiva. (Se você também precisar de uma função de vínculo (ou funções de pré e pós-vínculo) e tiver definido uma função de compilação, a função de compilação deverá retornar a (s) função (s) de vínculo porque o 'link'
atributo será ignorado se o 'compile'
atributo estiver definido.)
função de link - normalmente usada para registrar retornos de chamada do ouvinte (ou seja, $watch
expressões no escopo), bem como atualizar o DOM (ou seja, manipulação de iElement = elemento de instância individual). É executado após a clonagem do modelo. Por exemplo, dentro de um <li ng-repeat...>
, a função de link é executada após o <li>
modelo (tElement) ter sido clonado (em um iElement) para esse <li>
elemento em particular . A $watch
permite que uma diretiva seja notificada de alterações na propriedade do escopo (um escopo está associado a cada instância), o que permite que a diretiva processe um valor atualizado da instância no DOM.
função do controlador - deve ser usada quando outra diretiva precisar interagir com esta diretiva. Por exemplo, na página inicial do AngularJS, a diretiva de painel precisa se adicionar ao escopo mantido pela diretiva de guias, portanto, a diretiva de guias precisa definir um método de controlador (think API) que a diretiva de painel pode acessar / chamar.
Para uma explicação mais detalhada das diretivas de guias e painéis, e por que a diretiva de guias cria uma função em seu controlador usando this
(em vez de $scope
), consulte o escopo 'this' vs $ nos controladores AngularJS .
Em geral, você pode colocar métodos $watches
etc. na função de controle ou link da diretiva. O controlador será executado primeiro, o que às vezes é importante (consulte este violão que registra quando as funções ctrl e link são executadas com duas diretivas aninhadas). Como Josh mencionou em um comentário , você pode colocar funções de manipulação de escopo dentro de um controlador apenas para consistência com o restante da estrutura.
mouseover
o outro, o escopo para alterações de propriedade. Grande diferença.
Como complemento à resposta de Mark, a função de compilação não tem acesso ao escopo, mas a função de link.
Eu realmente recomendo este vídeo; Diretrizes para redação de Misko Hevery (o pai do AngularJS), onde ele descreve diferenças e algumas técnicas. (Diferença entre a função de compilação e a função de link na marca 14:41 no vídeo ).
Convenção angular: escreva a lógica de negócios no controlador e a manipulação do DOM no link.
Além disso, você pode chamar uma função de controlador da função de link de outra diretiva. Por exemplo, você tem 3 diretivas personalizadas
<animal>
<panther>
<leopard></leopard>
</panther>
</animal>
e você deseja acessar o animal de dentro da diretiva "leopardo".
http://egghead.io/lessons/angularjs-directive-communication será útil para saber sobre a comunicação entre diretivas
compile
sempre será executado antes controller
.
função de compilação -
sintaxe
function compile(tElement, tAttrs, transclude) { ... }
controlador
pré - link
A função de link é responsável por registrar os ouvintes do DOM, bem como atualizar o DOM. É executado após a clonagem do modelo. É aqui que a maior parte da lógica da diretiva será colocada.
Você pode atualizar o dom no controlador usando angular.element, mas isso não é recomendado, pois o elemento é fornecido na função de link
A função de pré-link é usada para implementar lógica que é executada quando j angular já compilou os elementos filhos, mas antes que qualquer link posterior do elemento filho fosse chamado
pós-link
diretiva que possui apenas a função de link, angular trata a função como um link de postagem
O post será executado após as funções de compilação, controlador e pré-link, por isso é considerado o local mais seguro e padrão para adicionar sua lógica de diretiva