1

假设我有三个（元素）指令：<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>
4

1 回答 1

0

在您的控制器中，您将执行以下操作：

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 会为您处理那些繁重的工作。

于 2012-12-20T01:41:12.150 回答