Question

我无法了解AngularJS范围的工作原理。

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

此标签指令可以包含其他2个指令， heading-template 指令，它是标题标题的模板，标签窗格 指令，这是显示/隐藏的窗格。

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

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

问题是标题模板 指令：此指令只是绑定 ng-repeat 指令到模板并编译它。

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

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

感谢您的帮助，我变得疯狂

Answer 1

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

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

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

在您的情况下，ng-transclude中templated-heading.tpl.html添加的内容将与$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/

AngularJS Scope和tab指令

1 个答案: