angularjs链接功能的用途答案

【问题标题】：Purpose of angularjs link functionangularjs链接功能的用途
【发布时间】：2016-04-19 02:35:15
【问题描述】：

我正在努力理解 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' ' 的情况下他可以侦听的事件类型。 p>

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

进行绑定

在我点击渲染内容按钮的示例中，item内容被加载。

【问题讨论】：

$watch 正在监视my-lazy-render 属性。在这种情况下my-lazy-render="showit"。当showit 的值变为truthy 时，它通过执行transclude 函数来渲染指令的内容。

标签： javascript angularjs dom transclusion

【解决方案1】：

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

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

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

【讨论】：