2

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

--- AngularJS1.1.5

我偶然发现了这个错误，但我不确定它是否是同一个问题？如果是，有什么解决方法吗？

这是一个使用静态列表的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) {
        }
    };
})

项目.html

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

3 回答 3

3

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

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

为模板。

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

这里引用开发者的话：

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

于 2013-08-02T15:09:11.270 回答
3

更新您的 items.html 如下：

 <div>
  <h1>What?</h1>
  <div ng-repeat="item in items">
      {{item}}
  </div>
</div>
于 2013-08-02T15:11:29.320 回答
1

您需要用一个根包装模板，如下所示：

<div>
    <h1>What?</h1>
    <div ng-repeat="item in items">
        {{item}}
    </div>
</div>
于 2013-08-02T15:10:59.823 回答