Transclude и ng-bind: как отображать под-директивы?

0

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

Сначала, в моем HTML, у меня есть родительская директива, содержащая дочернюю директиву. Время от времени я хотел бы обновить содержимое родительской директивы, но директива child, которую я пытаюсь ввести, не инициализируется AngularJS. Я объяснил свою проблему JSFiddle: http://jsfiddle.net/koj2e1th/2/

Когда я обновляю контент с использованием $ timeout, директива не инициализируется:

$timeout(function(){
    html = '<child-dir>TIMEOUT</child-dir>'
    scope.content = $sce.trustAsHtml(html)
}, 2500)

Я попытался использовать компиляцию $ (видел это по другим вопросам), но мне не удалось заставить ее работать исправно. Не могли бы вы объяснить мне, как сделать компиляцию в этом контексте и правильно ли настроить child-dir?

Заранее спасибо!

Теги:

2 ответа

1
Лучший ответ

Директива child-dir не компилируется. до того, как директива добавлена в DOM, она должна быть скомпилирована с областью. кликните сюда

var demo = angular.module('demo', []);
demo.directive('parentDir', function($sce, $timeout, $compile) {
    return {
        restrict: 'E',
            transclude: true,
            template: '<div ng-bind-html="content"></div>',
        link: function (scope, element, attrs, controller, transcludeFn) {
            transcludeFn(function(html) {
              $timeout(function() {
                html = _.reduce(html, function(carry, domElement) {
                  if (domElement.outerHTML) {
                      return carry + domElement.outerHTML
                  } else {
                    return carry;
                  }
                }, '')
                scope.content = $sce.trustAsHtml(html)
              })
            })
            var el = $compile( "<child-dir>TIMEOUT</child-dir>" )(scope );
            element.parent().append( el );
        }
    }});

demo.directive('childDir', function($sce) {
    return {
        restrict: 'E',
            transclude: true,
            template: '<div>CHILD DIR</div>'
    }}); 
  • 0
    Спасибо, это помогло мне решить мою проблему. Я пытался использовать и $ sce, и $ compile, но благодаря вашему примеру я заметил, что неправильно использовал $ sce здесь.
1

Из фрагмента, который вы предоставили, кажется, что вы пытаетесь самостоятельно заниматься трансключением.

Ну, на самом деле вам не нужно это делать, поскольку свойство tranclude и атрибуты ng-transclude находятся в вашем распоряжении.

Вы можете уточнить свои определения директив для использования этой функции, как показано ниже:

/* ... */
.directive('parentDir', function(){
   return {
     transclude: true,
     link: function(){ /* Any DOM manipulation logic if required */ },
     template: '<div ><h2>Parent Directive</h2><div ng-transcude></div></div>'
   };
})
.directive('childDir', function(){
   return {
     transclude: true,
     template: '<div ><h4>Child directive</h4><div ng-transclude></div></div>'
   };
});

Обратите внимание на использование атрибута ng-transclude в шаблоне. Это говорит AngularJS о том, где именно должны быть переведены перечисленные элементы/директивы.

Поэтому, если у вас есть ваши директивы в следующем формате:

<parent-dir>
   <child-dir></child-dir>
</parent-dir>

<child-dir> будет помещен в часть <div ng-transclude> <parent-dir> шаблона <parent-dir> в окончательной скомпилированной версии.

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

  • 0
    Спасибо за совет, я не знал, что это работает таким образом. Мне пришлось сохранить функцию включения, потому что в моем проекте мне нужно применить модификации к включенному содержимому, но я буду помнить об этом для моих следующих директив!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню