javascript - 使用 ng-transinclude 将作用域强制指定到命名槽

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 时，将是当前迭代项的引用绑定(bind)在 <selectable-item-list> 内。

据我所知，嵌入似乎看不到指令的范围，因此，item.text无法绑定(bind)，因为没有 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>

Answer 1

我的假设是错误的!当我说嵌入的内容无法访问包含指令范围时，我错了，因为其他问答: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 .

所以我解决了我的问题，只需用 $parent.item 替换 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>