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>

在你的angular.module（....然后你可以将指令连接到类。每次更新pageElements数组时，列表将通过添加新的，编辑当前的或删除那些不再存在的人.Angular为你照顾那些笨拙的工作。

AngularJS：基于具有指令名称的数组插入指令

1 个答案: