AngularJS-ng点击指令'；s链接函数

我正在处理一个指令，在

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>');
      }
   }
});

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);
        }
      };
    }
  };
})

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

app.directive（'foo'，function（）{
限制：“A”，
链接：功能（范围、要素）{
…有些逻辑
对于（变量i=1；i“+i+””）；
}
}
});

但是，

ng click

处理程序在到达时就死了。如何使处理程序按预期运行？

这应该可以做到：

    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);
      }
   }
});

app.directive（'foo'，函数（$compile）{
限制：“A”，
链接：功能（范围、要素）{
…有些逻辑
对于（变量i=1；i“+i+””）；
$compile（elem）（范围）；
}
}
});

这应该可以做到：

    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);
      }
   }
});

app.directive（'foo'，函数（$compile）{
限制：“A”，
链接：功能（范围、要素）{
…有些逻辑
对于（变量i=1；i“+i+””）；
$compile（elem）（范围）；
}
}
});

在AngularJS中，如果不执行一些奇怪的

$compile

逻辑来注册

ngClick

指令，就无法将指令附加到自定义指令中。可能是这样的：

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

顺便说一句，我不知道这是否有效，如果不行，请不要让我负责。通常，解决此问题的方法是使用如下指令：

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>');
      }
   }
});

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);
        }
      };
    }
  };
})

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

angular.directive（'pager'，function（）{
返回{
限制：“AEC”，
范围：{
numPages:'=寻呼机'，
pageFn:“=”
},
模板：“
{{{page}
”，
链接：功能（范围、要素、属性）{
scope.pages=[]；
范围.$watch（'numPages'，函数（页）{
如果（！页）返回；
scope.pages=[]；
对于AngularJS中的（var i=1；i，如果不执行一些奇怪的
$compile
逻辑来注册
ngClick
指令，就无法将指令附加到自定义指令中。可能类似于：

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

顺便说一句，我不知道这是否有效，如果不行，请不要追究我的责任。通常，解决此问题的方法是使用如下指令：

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>');
      }
   }
});

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);
        }
      };
    }
  };
})

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

angular.directive（'pager'，function（）{
返回{
限制：“AEC”，
范围：{
numPages:'=寻呼机'，
pageFn:“=”
},
模板：“
{{{page}
”，
链接：功能（范围、要素、属性）{
scope.pages=[]；
范围.$watch（'numPages'，函数（页）{
如果（！页）返回；
scope.pages=[]；
对于（var i=1；i我最后做的是将指令模板中的
ng repeat
替换为
bindonce
，这将占用空间最小化

我最后做的是将指令模板中的
ng repeat
替换为
bindonce
，这将占用空间最小化

请参阅虽然您可以使用
$compile
来解决问题，但这不是一个好主意。请尝试使用带有绑定的模板。正是这样，我不需要也不想要绑定。观察者正在放慢速度。@Metzger
link
函数的工作原理应该与控制器类似，并且不应该修改视图目录添加事件监听器是可以的，但创建/删除部分不是。您使用MVC模式的方式错误。好的，给我一个不涉及双向数据绑定的解决方案。如果没有，我也无能为力。请参阅。虽然您可以使用
$compile
来解决问题，但这不是一个好主意。尝试使用带有绑定的模板ead。就是这样，我不需要也不想要绑定。监视程序正在减慢速度。@Metzger
link
函数应该主要像控制器一样工作，它不应该直接修改视图。添加事件监听器可以，但创建/删除部分不行。您以错误的方式使用MVC模式。好的，给我一个不涉及lve双向数据绑定。如果没有，我也无能为力。是的，但该应用程序必须在与原始iPad一样旧的设备上尽可能响应，并且使用ng repeat会导致页面在该设备上陷入困境，即使有20个条目，每个条目大约有8个观察者。好吧，我不能在ng repeat上禁用双向数据绑定，所以我很抱歉ft黑客攻击我的方法。但是如果有什么我遗漏的，我会感谢你的建议。哈，恐怕我能给出的唯一建议是，除了Angular之外，开放使用其他框架。这对JS堆栈来说通常是相当沉重的。如果你必须绕开框架的默认功能一次，你就必须这样做很多次过去了。这通常是一个迹象，表明其他东西可能更适合你的需要。我担心在这个开发阶段不会回头，但我会牢记你和其他人的建议，并遵守规则。也许我缺少一种不同的方法。干杯。是的，但应用程序必须在开发过程中尽可能响应Ice与原来的iPad一样旧，使用ng repeat会导致页面在该设备上陷入困境，即使有20个条目，每个条目大约有8个观察者。好吧，我不能在ng repeat上禁用双向数据绑定，所以我只能继续黑客操作。如果我缺少什么，我会感谢你的建议。哈，恐怕这是唯一的建议我能给出的是，除了Angular之外，还可以开放地使用其他框架。这在JS堆栈上通常是相当沉重的。如果你必须绕过框架的默认功能一次，你就必须重复数百次。这通常是一个迹象，表明其他东西可能适合你的需要