使用ng-transclude

Question

我的指令如下：

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

问题出在<item-template>，当item内部ng-repeat绑定在<selectable-item-list>内时，item.text将成为当前迭代项的引用}。

AFAIK，似乎转换不能看到指令的范围，因此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>

In [433]: for g,x in grp:
   .....:     print(g, x)
   .....:
A     groups  values  foo  bar
112      A       4    0    4
77       A       3    1    2
B    groups  values  foo  bar
77      B      -3   31   34
C     groups  values  foo  bar
134      C     -60   44    5
129      C      50    5    3

Answer 1

我的假设错了！当我说被翻译的内容无法访问包含指令范围时，我错了，因为这个其他Q＆amp; A：Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?绝对过时了。

事实上，作为同一问答的一部分还有另一个答案，其中有人描述现在这已经修复并且transcluded content can access its direct directive scope using $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>