javascript - 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，也是我第一次重复自定义指令，所以我不知道问题是重复自定义指令还是错误使用 { { 键 }} 值。

就在我添加问题时，我想到了一些解决方案，这可能是因为在我的自定义指令中我的 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>