Почему область ng-transclude не является дочерней областью своей директивы – если директива имеет изолированную область видимости?

Учитывая директиву ( container1 ) с transclude и изолированную область действия, когда директива связана, тогда у меня есть эти области:

 Scope 004 <-- scope of the body Scope 005 <-- scope of directive container1 Scope 006 <-- scope of the ng-transclude 

Я ожидал:

 Scope 004 <-- scope of the body Scope 005 <-- scope of the directive Scope 006 <-- scope of the ng-transclude 

Если одна и та же директива имеет общую область действия вместо изолированной области видимости , я получаю ожидаемый результат.

Это вызывает у меня проблему, потому что, если транслируемый контент содержит другую директиву ( component1 ) с изолированной областью, я получаю:

 Scope 004 <-- scope of the body Scope 005 <-- scope of the directive Scope 006 <-- scope of the ng-transclude Scope 007 <-- scope of directive component1 

Я хочу использовать следующие директивы:

    

Но это не работает, внутри component1 , $scope.data не undefined потому что objectExposedInContainer1 не находится в правильной области.

У меня есть два вопроса:

  • Почему область ng-transclude не является дочерней областью ее директивы, если директива имеет изолированную область видимости? Это ошибка?
  • Если это не ошибка, как директива контейнера передает данные в ее содержимое, если не путем установки таких атрибутов, как я.

Вот пример, где он не работает: http://plnkr.co/edit/NDmJiRzTF9e5gw8Buht2?p=preview . Поскольку Plunker построен с Anguar, его трудно отлаживать с Batarang. Я рекомендую загрузить код локально. app.js line 10 app.js чтобы она работала с использованием общей области.

Почему область ng-transclude не является дочерней областью ее директивы, если директива имеет изолированную область видимости?

ng-transclude разработанный, чтобы позволить директивам работать с произвольным контентом, а изолированные области предназначены для того, чтобы директивы могли инкапсулировать свои данные.

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

Если это не ошибка, как директива контейнера передает данные в ее содержимое, если не путем установки таких атрибутов, как я.

Если директива контейнера и содержащиеся в нем директивы связаны между собой, то есть вы написали оба из них и должны действовать вместе, тогда они должны взаимодействовать через общий controller.

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


Угловая документация вполне понятна, каково должно быть поведение:

«При типичной настройке виджет создает область изоляции, но переход не является дочерним, а является дочерним элементом области выделения. Это позволяет виджету иметь личное состояние, а переход должен быть связан с родителем ( предварительно изолировать).

вы можете вручную перенести дочерний элемент

 link: function(scope, element, attrs, ctrl, transclude) { transclude(scope, function(clone, scope) { element.find('.transclude-placeholder').append(clone); }); } 

Верхний ответ верен только для Angular до v1.2.

Поскольку Angular v1.3 изменилось, и теперь он ведет себя точно так, как описано в части «Я ожидал» вопроса, сделав этот вопрос устаревшим для Angular v1.3 +.

Источник: https://github.com/angular/angular.js/commit/fb0c77f0b66ed757a56af13f81b943419fdcbd7f

  • Cordova + Angularjs + Устройство готово
  • Переадресация htaccess для Угловых маршрутов
  • Как фильтровать несколько значений (операция OR) в angularJS с помощью флажка
  • Как читать двоичные данные в AngularJS в ArrayBuffer?
  • HTML5 Video не работает с тегом AngularJS ng-src
  • Angularjs $ q.all
  • В чем разница между ng-app и data-ng-app?
  • Как получить предыдущий элемент в ng-repeat?
  • Поддерживает ли URL-адрес шаблона угловой маршрутизации файлы * .cshtml в ASP.Net MVC 5 Project?
  • Угловой разрыв JS ForEach
  • В чем разница между «@» и «=» в области действия в AngularJS?
  • Interesting Posts
    Давайте будем гением компьютера.