Question

为什么我的外部模板不使用ng-repeat呈现项目？

--- AngularJS 1.1.5

我偶然发现 this bug ，但我不确定这是否是同一个问题？如果有任何解决方法吗？

这是使用静态列表的 Plunker ，但解决方案需要支持双向绑定，因为数据是动态的。（无论如何它应该如何工作...... ）

控制器

.controller('main', ['$scope',function($scope) {
  $scope.items = ['a','b','c'];
}])

指令

.directive('items', function() {
    return {
        restrict: 'E',
        replace: true,
        controller: 'main',
        templateUrl: 'items.html',
        link: function(scope, controller) {
        }
    };
})

items.html

<div ng-repeat="item in items">
    {{item}}
</div>

Answer 1

这是因为您的指令使用的是根元素上没有的模板，请尝试：

<div>
  <h1>What?</h1>
  <div ng-repeat="item in items">
    {{item}}
  </div>
</div>

表示模板。

编辑：要理解这一点，我们可以看一下角度本身的来源。可以在here查看负责此操作的编译方法。罪魁祸首是mergeTemplateAttributes，当看到这里的意图时，对一个根的需求变得明显：当替换DOM节点时，角度需要传递属性。当提取的模板中有多个节点时，它将引发错误，因为它无法决定将应用原始属性的节点（请参阅here以了解抛出的错误）。

开发人员的引用：

当用HTML模板替换元素时，模板上的new需要与DOM中的现有属性合并。期望的效果是存在两个属性。

Answer 2

更新您的items.html，如下所示：

 <div>
  <h1>What?</h1>
  <div ng-repeat="item in items">
      {{item}}
  </div>
</div>

Answer 3

您需要使用这样的一个根包装模板：

<div>
    <h1>What?</h1>
    <div ng-repeat="item in items">
        {{item}}
    </div>
</div>

指令模板AngularJS中的ng-repeat

3 个答案: