1

我有一个指令如下：

<selectable-item-list items="model.items">
    <item-template>
          <span ng-bind="item.text"></span>
    </item-template>
</selectable-item-list>

问题在于，当内部绑定在其中时，当前迭代项的引用<item-template>在哪里。itemng-repeat<selectable-item-list>

AFAIK，似乎嵌入无法看到指令的范围，因此，它item.text不能被绑定，因为根本没有item。

您将如何解决这种情况？以前我是手动嵌入<item-template>，但其他方法有其他缺点/问题。

这是一个可运行的代码片段，可作为我真实案例的示例：

var app = angular.module("app", []);

app.controller("some", function() {
  this.items = [{
    text: "hello"
  }, {
    text: "bye"
  }];
});

app.directive("test", function() {
  return {
    template: `<ol>
                  <li ng-repeat="item in items">
                      <div ng-transclude="itemTemplate"></div>
                  </li>
                </ol>`,
    transclude: {
      "itemTemplate": "itemTemplate"
    },
    scope: {
      "items": "="
    }
  }
});
<script src="https://code.angularjs.org/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="some as some">
  <test items="some.items">
    <item-template>
      <span ng-bind="item.text"></span>
    </item-template>
  </test>
</div>

4

1 回答 1

1

我有一个错误的假设！当我说嵌入的内容无法访问包含指令的范围时，我错了，因为其他问答：为什么 ng-transclude 的范围不是其指令范围的子级 - 如果指令具有隔离范围？这是绝对过时的。

事实上，作为同一个问答的一部分，还有另一个答案，有人描述说现在这个问题已经得到修复，并且嵌入的内容可以使用$parent.

所以我解决了我的问题，只是用它替换了item属性访问，$parent.item它起作用了！

我添加了一个具有此修复程序的工作代码片段：

var app = angular.module("app", []);

app.controller("some", function() {
  this.items = [{
    text: "hello"
  }, {
    text: "bye"
  }];
});

app.directive("test", function() {
  return {
    template: `<ol>
                  <li ng-repeat="item in items">
                      <div ng-transclude="itemTemplate"></div>
                  </li>
                </ol>`,
    transclude: {
      "itemTemplate": "itemTemplate"
    },
    scope: {
      "items": "="
    }
  }
});
<script src="https://code.angularjs.org/1.5.7/angular.js"></script>

<div ng-app="app" ng-controller="some as some">
  <test items="some.items">
    <item-template>
      <span ng-bind="$parent.item.text"></span>
    </item-template>
  </test>
</div>

于 2016-07-08T19:22:21.563 回答