ng-repeat="(key, value)" 不能将 {{key}} 的值用作另一个指令的全局范围的一部分

Question

<div ng-repeat="(key,x) in selectedPoll.questions">
    <p>{{x}}</p>
    <p>{{key}}</p>
    <canvas chart-directive data="arrayResult.{{key}}" id="{{ $index }}">
    </canvas>
</div>

当我在图表指令的全局范围内使用 {{key}} 时，无法访问 {{ $index}}，尽管当我删除 {{key}} 并仅保留 arrayResult 时，ng-repeat 正在运行.

说明：我使用 id {{ $index }} 由 chart-directive 搜索 ng-repeat 中的每个 x，因此我可以根据需要创建任意数量的 chart-directives。

然后为了一切正常工作，我必须传递正确的数据集，图表指令的每个数据集都具有与 ng-repeat 中 x 的 {{ key }} 相同的结尾，例如：

 data="arrayResult.q1 "

为了使其动态化，我想将其切换为：

 data="arrayResult.{{ key }}

但是当我添加 {{ key }} ng-repeat stop 并得到一个结果时，我认为这是因为它无法读取 {{ $index }}

的 id 值

这是我第一次在 ng-repeat 中使用 key 和 $index，也是我第一次重复自定义指令，所以我不知道问题是重复自定义指令还是错误使用{{ key }} 值。

就在我添加问题时，我想到了一些解决方案，这可能是因为在我的自定义指令中我的 scope.data 看起来像这样

   scope: {
                data:'='
            },

所以如果我是对的，如果有人能告诉我这是否可能，以及如何打开范围数据以供像这样的表达式 "arrayResult.{{ key }} ??

Answer 1

仅当您的图表数据是字符串时才使用 @。

您可以保留指令的 =，但您需要更改：

data="arrayResult.{{key}}"

进入这个：

data="arrayResult[key]"

花括号确实只适用于 @ 范围，但你会得到字符串 "arrayResult.q1" 而不是 arrayResult.q1 中的实际值，所以 = 是要走的路。

查看下面的模拟片段：

angular.module("test", []).controller("test", function($scope) {

  $scope.questions = {q1: "do you like apples?", q2: "do you like bananas?"};
  
  $scope.arrayResult = {q1: true, q2: false};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
  <div ng-repeat="(key,x) in questions">
      <p>question: {{x}}</p>
      <p>key: {{key}}</p>
      <div>result: {{arrayResult[key]}}</div>
      </canvas>
  </div>
</div>

ng-repeat="(key, value)" 不能将 {{key}} 的值用作另一个指令的全局范围的一部分

ng-repeat="(key, value)" cannot use value of {{key}} as part of global scope for another directive

javascript

angularjs

angularjs-scope

angularjs-ng-repeat