指令模板中的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

回答

相關問題