Angular:如何强制重新编译指令? [英] Angular: How to force recompile directive?

问题描述

HTML:

<custom-directive status-stored-in="obj"></custom-directive>

问题:

我为大量 obj 内置了翻页功能.这意味着代表objs当前页面的arr的值会发生变化.但是，status-stored-in="obj" 部分中的 obj 不会随着更改而刷新.

现在我的解决方案是在 customDirective 中添加一个 ng-if，来回闪烁其值以强制重新编译.有没有其他等效、更简洁的方法来处理这个问题?

自定义指令的开始:

module.directive 'checkbox', (checkboxHooks) ->限制:'E'范围:钩子:'='挂钩:'='状态存储:'='templateUrl: '模板/checkbox.html'链接:(范围，元素，属性)->

要点是它需要获取一个对象，用于存储 checked 状态.全部可以在这里找到:[coffee/js].

解决方案

在你的指令链接函数中，你需要观察 status-stored-in 的变化，然后重新编译它，例如:

 链接:函数(范围，元素){scope.$watch('statusStoredIn', function() {element.html(statusStoredIn);$compile(element.contents())(scope);});}

HTML:

<div ng-repeat="obj in arr">
   <custom-directive status-stored-in="obj"></custom-directive>
</div>

Problem:

I have page-turn built in for the large amount of objs. Which means that the value of arr, representing the current page of objs, will change. However, the obj in the status-stored-in="obj" part is not refreshed with the change.

Right now my solution is to add a ng-if in customDirective, flickering its value back and forth to have it force recompiled. Is there any other equivalent, neater way to deal with this?

Edit:

The start of the custom directive:

module.directive 'checkbox', (checkboxHooks) ->
  restrict: 'E'
  scope:
    hook: '='
    hookedTo: '='
    statusStoredIn: '='
  templateUrl: 'templates/checkbox.html'
  link: (scope, element, attr) ->

The gist is that it needs to get hold of an object, for storing the checked status. The whole of it can be found here: [coffee/js].

解决方案

Inside your directives link function you need to watch status-stored-in for changes and then recompile it e.g.:

   link: function(scope, element) {
    scope.$watch('statusStoredIn', function() {
      element.html(statusStoredIn);
      $compile(element.contents())(scope);
    });
   }  

这篇关于Angular:如何强制重新编译指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！