javascript - Angular : Why is this not working? 中的包含和范围

Question

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

<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>'
    };
});

骗子在这里:http://plnkr.co/edit/yRHcNGjQAq1NHDTuwXku

嵌入本身正在工作，但 {{title}} 仅在指令的模板中被替换。
然而，即使指令在其范围内有一个变量 title ，嵌入元素内的 {{title}} 仍然为空。这是为什么？

Answer 1

嵌入元素的范围不是指令的子范围，而是同级范围。文档是这样说的:

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

在这种情况下，如何访问转译范围的最简单解决方案如下:

.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;
        }
    };
});

演示:http://plnkr.co/edit/ouq9B4F2qFPh557708Q1?p=preview