Question

我想要理解angularjs链接功能

我有自定义延迟加载指令

的这个例子

的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

我发现的文档解释了链接函数意图是创建一个事件监听器来处理事件

如果是这样，有人可以解释这个事件监听器的目的和他可以听到的事件类型，在这个例子中，为了转换元素'tranclude：'element''。

是否有一种DOM事件可以对项目

进行绑定

在我点击渲染内容按钮的示例中，项目内容已加载。

Answer 1

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

此复制由传递给链接函数的transclude函数完成。在这种情况下，clone参数是元素本身的副本，因为transclude设置为element。（有关翻译的更多信息，请参阅this答案。）

此外，scope.$watch返回一个函数，该函数在被调用时将禁用观察者（即，当值发生变化时，函数将不会再次执行）。

angularjs链接功能的目的

1 个答案: