指令模板中的ng-repeat AngularJS

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

--- 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>

来源

2013-08-02 Dan Kanze

这是因为你的指令使用不具有根元素的模板，尝试：

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

为模板。

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

该帖点击这里开发商：

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

来源

2013-08-02 15:09:11 Florian

作品对我来说分叉的plunkr ..奇怪了。 – Florian

+1 Thankyou就是这样。我想知道为什么你需要用根元素来包装。 –

我在主题上扩展了我的答案。 – Florian

你需要一个根包模板是这样的：

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

来源

2013-08-02 15:10:59 zsong

更新如下items.html：

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

来源

2013-08-02 15:11:29

指令模板中的ng-repeat AngularJS

回答

相关问题