angularjs链接功能的用途

Purpose of angularjs link function

本文关键字：功能 链接 angularjs      更新时间：2023-09-26

我正在努力很好地理解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链接示例

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

如果是的话，有人能解释一下这个事件监听器的目的，以及在这个例子中，在元素'tranclude:'element'的transclusion的情况下他可以监听的事件类型吗。

是否有一种DOM事件为项进行绑定

在该示例中，当我单击渲染内容按钮时，将加载项内容。

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

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

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

相关文章：