angularjs鏈接功能的目的

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>

鏈接器示例

我找到的文檔說明，鏈接功能旨在創建事件偵聽器以處理事件

如果是這樣，在此示例中，如果有人包含元素tranclude：'element' ，有人可以解釋此事件偵聽器的目的和事件類型。

是否有一種DOM事件可以對商品進行綁定

在示例中，當我單擊“ 渲染內容”按鈕時，將加載項目內容。

Answer 1

基本上，鏈接函數在傳遞給div元素的my-lazy-render屬性（在本例中為showit ）的對象上設置一個監視程序，該監視程序在該對象的值更改時執行該函數。 如果將其更改為true（單擊按鈕時就是這種情況），它將在當前元素之后復制該元素（即，使用my-lazy-render屬性復制div ）。

此復制是通過傳遞給鏈接函數的transclude函數完成的。 在這種情況下， clone參數是元素本身的副本，因為transclude設置為element 。 （請參閱此回答更多關於transclusion一點。）

同樣， scope.$watch返回一個函數，該函數在調用時將禁用監視程序（即，值更改時將不再執行該函數）。

angularjs鏈接功能的目的

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-13 22:33:38

angularjs鏈接功能的目的

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-13 22:33:38

解決方案1
0 已采納 2016-01-13 22:33:38