指令属性中的花括号，angularJS

Question

我有一个指令，它使用id 参数在控制器的范围内获取一个数组，如果 id 是静态值，它可以正常工作，但是如果我使用花括号（例如，我使用 ng-repeat 重复指令所以每个 id 都需要是唯一的，尽管如果我使用另一个属性而不是 id 它仍然不起作用），那么它就不起作用，大括号不被评估，并在网络检查器中查看源代码，它字面意思是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

（如果我要在牌组数组中添加一张牌，那么两个零都会变成一个）

---

上面的工作，因为它不使用 ng-repeat，属性是硬编码的。下面的属性需要是动态的，这不起作用，因为不计算花括号。

但是，如果我想通过使用 ng-repeat 来拥有多个卡组，则它不起作用：

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

那么 id 仍然是字面上的“slot{{index}}”，而不是“slot0”等。

我能做到：

<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>

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

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

这里有一个包含您的确切问题的 sn-p，http://jsbin.com/iMezAFa/2/edit。