$ compile不能与ng-repeat一起使用

I have two views in my app that displays & manages a list called 'Categories' I'm using the same template for two different views in my app. In the 1st view I want to give "Edit" right to the user & in the other I don't want the 'Edit' button to show up. Hiding & showing the 'Edit' button is being tackled by the following custom directive:

我的应用程序中有两个视图显示和管理名为“类别”的列表我在我的应用程序中使用相同的模板用于两个不同的视图。在第一个视图中,我想向用户提供“编辑”,而在另一个视图中,我不希望显示“编辑”按钮。隐藏和显示“编辑”按钮正在由以下自定义指令处理:

angular.module('starter.directives', [])
    .directive('categoryEdit', function($ionicHistory, $compile) {
       return{
           restrict: 'A',
           priority: 1001,
           compile: function(element){
               var categoryEdit = $ionicHistory.backView() ? false : true;
               element.attr('ng-show', categoryEdit);
               var fn=$compile(element, null, 1);
               return function(scope){
                   fn(scope);
                };
            }
    }
})

The whole thing was working fine until I included ng-repeat in my template. After some debugging I figured that by excluding "terminal: true" from the directive my route to the template works fine. However, the 'Edit' still shows up in both views. It turns out the $compile is not working with ng-repeat.

整个过程工作正常,直到我在模板中包含ng-repeat。经过一些调试后,我想通过从指令中排除“terminal:true”,我到模板的路由工作正常。但是,“编辑”仍显示在两个视图中。事实证明$ compile不能与ng-repeat一起使用。

Here is my template:

这是我的模板:

<div class="list" ng-repeat="category in categories"><!--has nested ng-repeat-->
          <div class="item item-button-right assertive">
              <span>{{category.name}}</span>
              <div class="button-group">
                  <button ng-click="editCategory(category)"
                      category-edit
                      class="button button-clear button-energized button-small">Edit</button>
                  <button class="button button-clear button-energized button-small">Use</button>
              </div>
          </div>
          <div class="item" ng-repeat="item in category.items">{{item}}</div>
</div>

1 个解决方案

#1

angular.module('appModule',[]);
angular.module('appModule')
    .directive('categoryEdit', function($compile) {
       return{
           restrict: 'A',
           priority: 1001,

           compile: function(element){

               var categoryEdit = $ionicHistory.backView() ? false : true;
               element.attr('ng-show', categoryEdit);

               return function(scope,element){
                 var fn=$compile(element, null, 1);
                  fn(scope);
                };
            }
    }
})

ngRepeat will clone the element so you apply the scope to the wrong element if you do it in the link phase this is the currect element

如果在链接阶段执行此操作,ngRepeat将克隆该元素,以便将范围应用于错误的元素,这是当前元素