Transclusion和角范围：这是为什么不工作？ [英] Transclusion and scopes in angular: Why is this not working?

问题描述

我有一个非常简单的设置：

I have a very simple setup:

<pane title="mytitle">Title in parent (transcluded): {{title}}</pane>

和

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title:'@' },
      template: '<div>' +
                  '<div>Title in isolated scope: {{title}}</div>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
});

该plunker是在这里： http://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku

该transclusion本身是工作，但 {{title}}的只被替换在指令中的模板。结果
在的{{title}} 但是里面的transcluded元素保持为空，即使指令有一个变量标题在其范围内。这是为什么？

The transclusion itself is working but the {{title}} only gets replaced in the directive's template.
The {{title}} inside the transcluded element however stays empty even though the directive has a variable title in its scope. Why is that?

推荐答案

transcluded元素的范围不指令但同级一个的子范围。这就是文档说：

The scope of the transcluded element is not a child scope of the directive but a sibling one. This is what documentation says:

在一个典型的设置窗口小部件创建一个分离的范围，但transclusion不是一个孩子，而是分离范围的兄弟。

In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope.

在这种情况下，您如何访问transcuded范围最简单的办法是这样的：

The simplest solution in this case how you can access transcuded scope is like this:

.directive('pane', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            title: '@'
        },
        template:
            '<div>' +
                '<div>Title in isolated scope: {{title}}</div>' +
                '<div ng-transclude></div>' +
            '</div>',
        link: function (scope, element, attrs) {
            scope.$$nextSibling.title = attrs.title;
        }
    };
});

这篇关于Transclusion和角范围：这是为什么不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！