Question

根据我的理解，它只在页面呈现之前运行一次。但有没有一种情况，它在页面渲染后运行？

我尝试使用此plnkr测试一些内容：

angular
  .module('app', [])
  .directive('test', function($http) {
    return {
      restrict: 'E',
      template: '<input />',
      link: function(scope, el, attrs) {
        var input = angular.element(el[0].children[0]);
        input.on('change', function() {
          console.log('change event');
          scope.$apply(function() {
            console.log('digest cycle');
          });
        });
        input.on('keyup', function() {
          console.log('keyup event');
          var root = 'http://jsonplaceholder.typicode.com';
          $http.get(root+'/users')
            .success(function() {
              console.log('http request successful');
            })
            .error(function() {
              console.log('http request error');
            });
        });
        console.log('link function run');
      }
    };
  });

输入输入字段会导致链接功能运行吗？
事件监听器会导致链接功能运行吗？
http请求（使用$http？）会导致链接功能运行吗？
摘要周期会导致链接功能运行吗？

所有这些问题的答案似乎都是“不”。

Answer 1

link函数在编译指令实例时运行，在本例中，在创建<test></test>元素时运行。这可能是当angular的引导编译页面时，当它来自ng-if，ng-repeat创建时，$compile创建时等等。

对于同一个指令实例，

link永远不会触发两次。值得注意的是，它在模板在指令的生命周期中编译后立即触发。

Answer 2

1 - 不，如果你将它绑定，它会导致更改唯一的ng模型。

2 - 不，它只会在事件绑定中启动代码。

3 - 同样不，事件绑定将启动$http.get()。请不要直接在您的指令上添加$ http。使用factory或类似的东西。

4 - Dunno

正如Dylan Watt所说，指令link仅在每个元素/ attr编译指令（仅一次）时运行....您可以用不同的方式编译它。普通的http，$compile，ng-repeat ....

你可以在你的指令中创建一个$ watch来“重新启动”绑定元素更改的一些代码。

这可能对您有所帮助：How to call a method defined in an AngularJS directive?

Angulars链接功能何时运行？

2 个答案: