Цель angularjs функции связи

Я Тринга хорошо понимать angularjs функции связиЦель 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="[email protected]" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <script data-require="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script data-require="[email protected]" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script data-require="[email protected]" 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 события, чтобы сделать привязку для пункта

В примере, когда я нажимаю на Рендер Content Button, то элемент содержимое загружается.

источник

2016-01-13 HDJEMAI

$ watch смотрит атрибут 'my-lazy-render'. В этом случае 'my-lazy-render =" showit "'. Когда значение 'showit' изменяется на правду, оно отображает содержимое директивы, выполняя функцию transclude. – georgeawg

В основном функция ссылки устанавливает Бодрствующую на объекте переданного атрибута div элемента my-lazy-render (в данном случае, showit), который выполняет функцию, когда значение этого объект изменяется. Если он изменяется на true (это происходит при нажатии кнопки), он будет дублировать элемент после текущего элемента (т. Е. Дублирует div с атрибутом my-lazy-render).

Это дублирование выполняется функцией transclude, которая передается функции связи. Параметр clone в этом случае является копией самого элемента, потому что для transclude установлено значение element. (см this ответ на немного больше на включение.)

Кроме того, scope.$watch возвращает функцию, которая при вызове отключит наблюдателя (т.е. функция не будет выполняться снова при изменении значения).

источник

2016-01-13 22:33:38

ответ

Смежные вопросы