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为你处理那些烦人的工作。