AngularJS 范围和选项卡指令

Question

我只是不明白 AngularJS 作用域的工作原理。

我有一个ui-tabs 指令，带有一个标签控制器。这应该处理选项卡式内容。

此选项卡指令可以包含 2 个其他指令，heading-template Directive，它是选项卡标题的模板，以及 tab-pane 指令，这是要显示/隐藏的窗格。

tab 指令可以有两种行为：如果 attr templated 在元素上，那么我们使用 空模板，稍后我们将使用 heading-template 指令 生成标签标题。

否则，我们使用一个模板来生成带有每个窗格标题的 ul 列表。

问题在于 heading-template Directive ：这个 Directive 只是绑定了 ng-repeat 指令模板并编译它。

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

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

谢谢你的帮助，我快疯了

Answer 1

最近，我发现很多人都有同样的根本原因：

ng-transclude 无法以您期望的方式工作。

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

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

如果您希望嵌入的内容与隔离范围绑定，您可以使用 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/