Question

我有一个使用id参数在控制器范围内获取数组的指令，如果id是静态值，它可以正常工作，但是如果我使用花括号（例如我重复）使用ng-repeat的指令，因此每个id都必须是唯一的，但是如果我使用的是另一个属性而不是id，它仍然无法工作），那么它不起作用，花括号不会被评估，并且查看Web检查器中的源代码，它实际上是id={{index}}而不是id=1。

编辑：我想要做的是当html中有一个stack元素时，它会在当前作用域（而不是指令的作用域）中创建一个与id同名的变量。

app.directive('stack', function() {
    return {
        restrict: 'E',
        templateUrl: 'stack.html',
        scope: {
            cards: '=id',
            name: '@id',
            countOnly: '@'
        },
        link: function(scope) {
            scope.cards = [];
            //because of cards: '=id', scope.cards is bound to the parentscope.<value of id attr>, so setting scope.cards to [], also creates the variable in the parent scope.
        }
    };
});

stack.html模板只包含（此时它将在稍后展开）：

<div class="stack">The stack called {{name}} contains {{cards.length}} cards</div>

所以如果我在index.html中有这个：

<stack id="deck"></stack>
<span>There are {{deck.length}} cards in deck</span>

结果是：

The stack called deck contains 0 cards
There are 0 cards in deck

（如果我要在牌组中添加一张牌，则两个零都会变为1）

上述工作，因为它没有使用ng-repeat，所以属性是硬编码的。在属性下面需要是动态的，并且这不起作用，因为花括号不被评估。

但是，如果我想通过使用ng-repeat来创建多个套牌，那么它不起作用：

<stack ng-repeat="index in range(5)" id="slot{{index}}"></stack>

然后id仍然按字面意思＆＃34; slot {{index}}＆＃34;，而不是＆＃34; slot0＆＃34;等等。

我能做到：

<stack id="slot0"></stack>
<stack id="slot1"></stack>
<stack id="slot2"></stack>
<stack id="slot3"></stack>
<stack id="slot4"></stack>

它会像我期望的那样起作用。

这几乎就像我需要cards: '=id',为cards: '=$parse(id)'，（或者只有在包含大括号时才解析）

Answer 1

请见http://jsfiddle.net/4su41a8e/2/

用于单向绑定的花括号
没有用于双向绑定的大括号

HTML：

<div ng-app="app">
    <div ng-controller="firstCtrl">
        <stack ng-repeat="card in range" item="card" name="{{card.name}}"></stack>
    </div>
</div>

指令：

app.directive('stack', function () {
    return {
        restrict: 'AE',
        template: '<h2>cards id: {{cards.id}} </h2><p>name:{{name}}</p>',
        scope: {
            cards: '=item',
            name: '@name',
            countOnly: '@'
        }
    };
});

Answer 2

在ng-repeat使用中：

<stack id="index"></stack>

您不需要插值，而是需要对值的引用。

在指令中，然后使用数据绑定（在该注释上可以使用=或@）将索引绑定到cards变量。您现在可以通过卡访问链接功能中的实际索引值。

这是一个包含您确切问题的代码段http://jsbin.com/iMezAFa/2/edit。

指令属性angularJS中的大括号

2 个答案: