javascript - AngularJS 范围和 tab 指令

Question

我只是不明白 AngularJS 作用域是如何工作的。

我有一个 ui-tabs 指令，以及一个选项卡 Controller 。这应该处理选项卡式内容。

此选项卡指令可以包含其他 2 个指令，heading-template 指令(选项卡标题的模板)和 tab-pane 指令，即要显示/隐藏的 Pane 。

tab 指令可以有 2 种行为:如果 attr templated 位于元素上，那么我们使用空模板，稍后我们将使用 header-template 指令生成选项卡标题。

另外，我们使用一个模板来生成带有每个 Pane 标题的 ul 列表。

问题在于 heading-template 指令:这个指令只是绑定(bind)了 ng-repeat 指令到模板并编译它。

但我无法访问 scope.panes，它位于 Tab Directive 的 Controller scope.该指令根本找不到它们，我不明白为什么。

这是 JSFiddle :http://jsfiddle.net/whitep4nther/mwk9gp9x/

谢谢你的帮助，我快疯了

Answer 1

最近，我发现很多人都遇到同样的问题:

ng-transclude 没有按照您期望的方式工作。

按照设计，通过 ng-transclude 添加的内容将与外部(原始)范围绑定(bind)，而不是与 ng-transclude 所在的当前元素的范围绑定(bind)上。

在您的情况下，通过 templated-heading.tpl.html 中的 ng-transclude 添加的内容将与 $rootScope 绑定(bind)，不是 uiTabs 指令的隔离范围。

如果您希望嵌入的内容与隔离范围绑定(bind)，您可以使用 ng-tranclude 的修改版本，如下所示:

.directive('myTransclude', function () {
  return {
    restrict: 'EAC',
    link: function(scope, element, attrs, controllers, transcludeFn) {
      transcludeFn(scope, function(nodes) {
        element.empty();
        element.append(nodes);
      });
    }
  };
});

并在模板中使用它:

<script type="text/ng-template" id="/templated-heading.tpl.html">
  <div class="ui-tabs" my-transclude>
  </div>
</script>

示例 JSFiddle: http://jsfiddle.net/a7fjb9sr/1/