Транспортировка и область в угловых: почему это не работает?

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

Сама включения работает, но генеракодицетагкод заменен только в шаблоне Директивы.
Генеракодицетагкод внутри транккредированного элемента, однако, остается пустым, даже если директива имеет вариабельную генеракодицетагкод в его объеме.Почему это?

Answer 1

Область применения Transcluded элемента не является детской областью Директивы, а брата.Это то, что говорит документация:

В типичной настройке виджет создает область изоляции, но включение не является ребенком, а брата съемки изоляции.

Самое простое решение в этом случае, как вы можете получить доступ к TransCuded 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;
        }
    };
});

.

DEMO: http://plnkr.co/edit/ouq9b4f2qfph557708q1?p=preview<>

Answer 2

@dfsq верно о:

Область применения Transcluded элемента не является детской областью Директива, но брата один

Я хотел бы добавить больше комментариев, почему это ожидаемое поведение Angularjs. Как говорит документы:

в типичной настройке виджет создает область изолята, но Транспортировка не является ребенком, а брата сферы изолята. Этот позволяет видужет иметь частное состояние, а Транспортировка должна быть связана с родительским (предварительно изолирующим) объемом.

Транкладированный контент внутри Директивы - это произвольно, оно не должно иметь знания о масштабах изоляции Директивы, в противном случае мы будем создавать жесткий код соединения . Потому что для работы из включенного контента контент должен знать детали реализации вашей директивы (что доступно для использования).

Если вы решите, что содержимое относится к Директиве. У вас есть 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) Используйте пользовательское твкус, чтобы связать массу самостоятельно:

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

.

демонстрация