AngularJS：基於指令名稱的數組插入指令

Question

說我有三個（元素）指令：<x/> <y/> and <z/>。

module.directive('x', function() { 
    return { 
     restrict: 'E', 
     template: '<div class="x">{{identifier}}</div>' 
    } 
}); 

<y/> and </z>的指令是相似的。

我也有一個頁面配置對象的數組。每個對象都有一個類型和一個標識符。類型表示一個指令，標識符是在指令的模板內顯示的一些數據，在上面的指令片段中顯示爲{{identifier}}。

var pageElements = [ 
{type: 'x',identifier:'123'}, 
{type: 'z',identifier:'adf'}, 
{type: 'x',identifier:'qwe'}, 
{type: 'y',identifier:'4ed'}, 
{type: 'y',identifier:'576'} 
] 

在我的網頁我想是這樣的：

<div id="containingDiv" ng-repeat="elem in pageElements"></div> 

如何設置我的指令等，使下面的輸出將產生，並在pageElements陣列發生變化時更新？

<div id="containingDiv"> 
    <div class="x">123</div> 
    <div class="z">adf</div> 
    <div class="x">qwe</div> 
    <div class="y">4ed</div> 
    <div class="y">576</div> 
</div> 

Answer 1

在你的控制，你會做這樣的事情：

function myController($scope){ 
    $scope.pageElements = [ 
     {type: 'x',identifier:'123'}, 
     {type: 'z',identifier:'adf'}, 
     {type: 'x',identifier:'qwe'}, 
     {type: 'y',identifier:'4ed'}, 
     {type: 'y',identifier:'576'} 
    ]; 
} 

然後在你的HTML，因爲bmleite建議你將有：

<div id="containgDiv"> 
    <div class="{{elem.type}}" ng-repeat="elem in pageElements">{{elem.identifier}}</div> 
</div> 

這將產生

<div id="containingDiv"> 
    <div class="x">123</div> 
    <div class="z">adf</div> 
    <div class="x">qwe</div> 
    <div class="y">4ed</div> 
    <div class="y">576</div> 
</div> 

在你的a ngular.module（....你可以將指令連接到類。每次更新pageElements數組時，都會通過添加新內容，編輯當前內容或刪除不再存在的內容來更改列表。 Angular爲你處理那些煩人的工作。