Angular指令在ng-repeat中不求值

Angular Directive Does Not Evaluate Inside ng-repeat

本文关键字：ng-repeat 指令 Angular      更新时间：2023-09-26

我有以下设置:

App/指令

var app = angular.module("MyApp", []);
app.directive("adminRosterItem", function () {
    return {
        restrict: "E",
        scope: {
            displayText: "@"
        },
        template: "<td>{{ displayText }}</td>", // should I have this?
        link: function(scope, element, attrs){
            // What do I put here? I don't seem to have any
            // element to initialize (set up event handlers, for example)
        },
        compile: function(?,?,?){} // should I have this? If so, what goes inside?
    }
});
控制器

function PositionsController($scope) {
           $scope.positions = [{ Name: "Quarterback", Code: "QB" },
                               { Name: "Wide Receiver", Code: "WR" }
                              ]; 
}
HTML: 

<div ng-app="MyApp">
    <div ng-controller="PositionsController">            
        <table>
            <tr ng-repeat="position in positions">
                <admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item>
             </tr>
         </table>       
    </div>
</div>

这是一个非常简单的例子，但我不能让它渲染。也许有些东西是教程没有告诉我的，或者是Angular的秘密知识?

如果我删除<tr ng-repeat="..." />中的指令并放置<td>{{ displayText }}</td>，它将显示所有记录。

但是我希望这个指令比一个单独的<td>{{}}</td>(最终)更复杂，这样我就可以在多个应用程序中重用这个指令。

所以，我真的在问我们如何正确地创建一个指令，进入ng-repeat?我错过了什么?应该从上面的代码中去掉什么?

忽略所有的理论方面，您可以通过做两个简单的更改来使您的代码工作。

  1. 不要在属性名中使用混合大小写。displaytext not displayText
  2. 将<td>标签放在指令之外，在模板
    3. 中

这样做，它将工作;我认为这两个都是Angular的bug。

同意你需要考虑指令的开始和结束位置。下面是一个plnkr，它演示了一个绑定到数组中每个项的指令- http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

如果你想让指令封装由父作用域定义的集合的枚举，那就有点麻烦了。我不确定以下是否为"最佳实践"，但这就是我如何处理它- http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

当依赖于指令来执行迭代时，你会涉及透传，这是一个虚构的词，意思是(据我所知)取父级中定义的内容，将其推入指令，然后对其进行评估。我已经用angular工作了几个月了，我开始觉得让指令迭代是一种味道，我总是能够围绕它进行设计。

我认为正确的方法是将对象发送到管理花名册项目，如下所示:

<tr ng-repeat="position in positions">
  <admin-roster-item pos="position">         
  </admin-roster-item>
</tr>

和指令中的

var app = angular.module("MyApp", []);
app.directive("adminRosterItem", function () {
  return {
    restrict: "E",
    scope: {
        pos: "@"
    },
    template: "<td>{{ formattedText }}</td>", // should I have this?
    link: function(scope, element, attrs){
        // all of this can easily be done with a filter, but i understand you just want to     
        // know how it works
        scope.formattedText = scope.pos.Name + ' (' + scope.pos.Code + ')';
    }
  }
});

p。我没有测试这个!

与其把你的指令写成ng-repeat的子指令，不如试着把自定义指令和ng-repeat放在同一层，下面

<tr ng-repeat="position in positions" admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></tr>

而且，允许你的自定义指令被用作一个属性。AngulaJS已经将ng-repeat的优先级定义为1000，所以有时候当你自定义指令的时候，ng-repeat的优先级并不好。

第二个选项(只有在第一个失败时才尝试)是将自定义指令的优先级设置为比ngRepeat的优先级高，即设置为1001。

我也有类似的问题，如果视图包含指令('mydirective')

，则视图中的ng-repeat不会被评估。我的指令定义是 
angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'vm',
      link: function (scope, element, attrs) {
      }
    };
  });
我的视图控制器定义是 
  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "vm"
    });

你可以注意到两个控制器都通过'controllerAs'参数被'vm'引用。这就是问题的原因。当指令出现在视图中时，angular总是引用指令控制器中定义的'vm'，而不是视图的。

当我给控制器引用不同的名字时，问题消失了

现在，我的指令定义是 
angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'directiveVM',
      link: function (scope, element, attrs) {
      }
    };
  });
我的视图控制器定义是 
  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "viewCtrlVM"
    });

希望能有所帮助。

有完全相同的问题。在ng-repeat、table->tr->td->指令中有一个自定义指令，并且在使用ng-repeat和Array对表进行排序时。排序表确实改变了顺序，但指令没有重新渲染。问题是我使用了

track by $index

从ng-repeat中删除了按索引的音轨，这是固定的

相关文章：