angularjs link 函数的用途

Question

我正在努力理解 angularjs link 函数

我有这个自定义延迟加载指令的示例

script.js:

//Code
angular.module('app', []);

angular.module('app').controller('mainCtrl', function($scope) {
    $scope.items = [2,5,23,253];  
});

angular.module('app').directive('myLazyRender', function() {
  return {
    restrict: 'A',
    transclude: 'element',
    priority: 900,
    link: function(scope, el, attr, ctrl, transclude) {
      var hasBeenShown = false;
      var unwatchFn = scope.$watch(attr.myLazyRender, function(value) {
        if(value && !hasBeenShown) {
          hasBeenShown = true;
          transclude(scope, function(clone) {
            el.after(clone);
          });
          unwatchFn();
        }
      })
    }
  }
})

angular.module('app').directive('echo', function() {
  return {
    priority: 1300,
    link: function() {
      console.log('echo');
    }
  }
})

index.html:

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1"    rel="stylesheet"   href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1"  src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.3.0-rc.4" data-semver="1.3.0-rc.4" src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <h1>Hello Plunker!</h1>

    <div my-lazy-render="showit" echo ng-repeat="item in items">
        {{item}}
    </div>

    <button class="btn btn-primary" ng-click="showit = true">Render   Content</button>
  </body>

</html>

plunker link example

我找到的文档解释说 link 函数的目的是创建一个事件侦听器来处理事件

如果是这样，有人可以解释一下这个事件侦听器的用途以及在包含元素的情况下他可以侦听的事件类型 ' transclude: 'element' ' for这个例子。

是否有一种 DOM 事件可以为 item

做绑定

在示例中，当我点击 Render Content 按钮时，item 内容被加载。

Answer 1

基本上，link 函数在传递给 div 元素（在本例中为 showit）的 my-lazy-render 属性的对象上设置观察者，该对象执行该对象的值更改时的函数。如果它变为 true（当您单击按钮时就是这种情况），它将复制当前元素之后的元素（即复制 div 和 my-lazy-render 属性）。

此复制由传递给 link 函数的 transclude 函数完成。本例中的 clone 参数是元素本身的副本，因为 transclude 设置为 element。（有关嵌入的更多信息，请参阅 this 答案。）

此外，scope.$watch returns 一个函数，调用时将禁用观察程序（即当值更改时不会再次执行该函数）。

angularjs link 函数的用途

Purpose of angularjs link function

javascript

dom

angularjs

transclusion