Question

我正在处理一个指令，并且在link函数中，在迭代数组模型时，想要将元素附加到页面，并附加ng-click个处理程序。像这样：

app.directive('foo', function(){
   restrict: 'A',
   link: function(scope, elem){
      ... // some logic

      for (var i = 1; i < numberOfPages + 1; i++) {
         elem.append('<li ng-click="bar('+i+')">'+i+'</li>');
      }
   }
});

但ng-click处理程序在到达时已经死亡。如何使处理程序按预期运行？

Answer 1

在AngularJS中，您无法真正将指令附加到自定义指令，而无需执行一些奇怪的$compile逻辑来获取ngClick指令进行注册。可能类似于：

// include $compile
// ... append li elements
scope.$apply(function() {
  $compile(elem)(scope);
});

我不知道这是否有效，所以如果不这样做，请不要责备我。通常，解决此问题的方法是使用如下所示的指令：

angular.directive('pager', function() {
  return {
    restrict: 'AEC',
    scope: {
      numPages: '=pager',
      pageFn: '='
    },
    template: '<ul><li ng-repeat="page in pages" ng-click="executePage(page)">{{page}}</li></ul>',
    link:  function(scope, elem, attrs) {
      scope.pages = [];
      scope.$watch('numPages', function(pages) {
        if(!pages) return;
        scope.pages = [];
        for(var i = 1; i <= pages: i++) {
          scope.pages.push(i);
        }
      });
      scope.executePage = function(page) {
        if(scope.pageFn){
          // Additional Logic
          scope.pageFn(page);
        }
      };
    }
  };
})

然后在你的html中你会写这样的指令：

<my-directive>
  <div pager="numberOfPages" page-fn="goToPage"></div>
</my-directive>

goToPage是一个在myDirective指令中定义的函数，它接受一个页面参数。此时，分页指令也足够抽象，您可以在多个地方使用，而不必担心外部功能。

Answer 2

这应该这样做：

    app.directive('foo', function($compile){
   restrict: 'A',
   link: function(scope, elem){
      ... // some logic

      for (var i = 1; i < numberOfPages + 1; i++) {
         elem.append('<li ng-click="bar('+i+')">'+i+'</li>');
    $compile(elem)(scope);
      }
   }
});

Answer 3

我最终做的就是用ng-repeat替换指令模板中的bindonce，这样可以最大限度地减少占用空间。

https://github.com/Pasvaz/bindonce

AngularJS - 在指令的链接功能中单击ng

3 个答案: