棱角划分和范围：为什么这不起作用？

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

.

plunker在这里： http://plnkr.co/edit/yrhcngjqaq1nhdtuwxku

跨扫描本身正在运行，但是只能在指令的模板中替换为{{title}}。
然而，跨分组元素内的{{title}}即使指令在其范围内具有变量生成的变量title，也会留空。为什么？

Answer 1

跨分支元素的范围不是指令的子范围，而是一个兄弟姐妹。这是文件所说的：

在典型的设置中，窗口小部件创建了隔离范围，但跨扫描不是一个孩子，而是孤立范围的兄弟姐妹。

在这种情况下最简单的解决方案如何访问已超额范围：

.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

Answer 2

@dfsq是正确的：

跨分子元素的范围不是子范围 指令，但兄弟姐妹

我想添加更多的评论为什么这是Angularjs的预期行为。由于Docs说：

在典型的设置中，窗口小部件创建了隔离范围，但是 转速不是孩子，而是孤立范围的兄弟姐妹。这 使小部件成为可能具有私有状态，以及 转移到父母（预隔离）范围的结合。

指令内的跨分支内容是任意的，它不应该有关于指令的隔离范围的了解，否则，我们将创建一个紧密耦合代码。因为对于丢弃的内容工作，内容必须知道指令的实现细节（可用于使用的内容）。

如果您决定内容属于指令。你有2个选项：

1）制作模板的内容部分

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

.

demo

2）使用自定义旋转来绑定scope：

angular.module('transclude', [])
     .directive('pane', function(){
        return {
          restrict: 'E',
          transclude: true,
          scope: { title:'@' },
          template: '<div>' +
                      '<div>Title in isolated scope: {{title}}</div>' +
                      '<div class="transclude"></div>' +
                    '</div>',
        link: function (scope, element, attr,controller, linker) {
           linker(scope, function(clone){
                  element.find(".transclude").append(clone); // add to DOM
           });
          }
        };
    });

.

demo