Недавно у меня возникла проблема, чтобы понять, как динамически изменять содержимое директивы в 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
?
Заранее спасибо!
Директива 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>'
}});
Из фрагмента, который вы предоставили, кажется, что вы пытаетесь самостоятельно заниматься трансключением.
Ну, на самом деле вам не нужно это делать, поскольку свойство 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>
в окончательной скомпилированной версии.