我有一个名为“ panel”的自定义指令。
<panel title="One Title">
One Body
<panel title="Two Title">two</panel>
</panel>
我的问题是我无法获取嵌套面板指令进行渲染。请查看plunkr http://plnkr.co/edit/D0LfQqBViuraSNfmym4g?p=preview以获取JavaScript。
我预计
<div>
<h1>One Title</h1>
<div>
One Body
<div>
<h1>Two Title</h1>
<div>Two Body</div>
</div>
</div>
</div>
</div>
但是我得到了
<div>
<h1>One Title</h1>
<div>One Body</div>
</div>
正如您将看到的,我的目的是从控制器提供的数据渲染输出,而不是操纵dom。我正在探索将指令用作收集数据并将其提供给控制器的一种方法,以便可以从控制器提供的数据中渲染模板。结果,我正在寻找一个不在div上使用ng-transclude而是使用$ compile和或transclude(scope,fun ...)的某种组合来实现所述目标的解决方案。我的目的还在于更好地了解$ compile和transclude(scope,fun ...)如何有效使用。
最佳答案
这不会很简单,因为您愿意依赖ng-bind-html
。
让我们先来看一下:
transclude(scope, function(clone, scope){
panelCtrl.setBody($sce.trustAsHtml(clone.html()));
});
上面函数中的
clone
将包含子panel
指令的注释占位符,如下所示:One Body
<!-- panel: undefined -->
这是因为子面板指令具有
transclude: 'element'
,并且其链接功能尚未运行。要解决这个问题很容易,只需稍微修改一下代码即可:
var clone = transclude(scope, function () {});
panelCtrl.setBody($sce.trustAsHtml(clone.html()));
这样,
clone
将包含如下所示的真实模板:One Body
<div class="ng-scope"><h1 class="ng-binding">{{panel.title}}</h1><div class="inner ng-binding" ng-bind-html="panel.body"></div></div>
并不奇怪,我们现在有了一个真实的模板,但是绑定尚未发生,因此我们现在仍然不能使用
clone.html()
。真正的问题开始了:我们如何知道绑定何时完成
AFAIK,我们不知道确切的时间。但是要解决此问题,我们可以使用
$timeout
!通过使用
$timeout
,我们正在打破正常的编译周期,因此我们必须找到某种方法让父面板指令知道子指令的绑定已完成(在$timeout
中)。一种方法是使用控制器进行通信,最终代码如下所示:
app.controller('PanelCtrl', function($scope, $sce) {
$scope.panel = {
title: 'ttt',
body: $sce.trustAsHtml('bbb'),
}
this.setTitle = function(title) {
$scope.panel.title = title;
};
this.setBody = function(body) {
$scope.panel.body = body;
};
var parentCtrl,
onChildRenderedCallback,
childCount = 0;
this.onChildRendered = function(callback) {
onChildRenderedCallback = function () {
callback();
if (parentCtrl) {
$timeout(parentCtrl.notify, 0);
}
};
if (!childCount) {
$timeout(onChildRenderedCallback, 0);
}
};
this.notify = function() {
childCount--;
if (childCount === 0 && onChildRenderedCallback) {
onChildRenderedCallback();
}
};
this.addChild = function() {
childCount++;
};
this.setParent = function (value) {
parentCtrl = value;
parentCtrl.addChild(this);
};
});
app.directive('panel', function($compile, $sce, $timeout) {
return {
restrict: 'E',
scope: {},
replace: true,
transclude: 'element',
controller: 'PanelCtrl',
require: ['panel', '?^panel'],
link: function(scope, element, attrs, ctrls, transclude) {
var panelCtrl = ctrls[0];
var parentCtrl = ctrls[1];
if (parentCtrl) {
panelCtrl.setParent(parentCtrl);
}
var template =
'<div>' +
' <h1>{{panel.title}}</h1>' +
' <div class="inner" ng-bind-html="panel.body"></div>' +
'</div>';
var templateContents = angular.element(template);
var compileTemplateContents = $compile(templateContents);
element.replaceWith(templateContents);
panelCtrl.setTitle(attrs.title);
var clone = transclude(scope, function () {});
panelCtrl.onChildRendered(function() {
panelCtrl.setBody($sce.trustAsHtml(clone.html()));
compileTemplateContents(scope);
});
}
}
});
柱塞示例:http://plnkr.co/edit/BBbWsUkkebgXiAdcnoYE?p=preview
我在插件中留了很多
console.log()
,您可以看看实际发生了什么。PS。如果您不使用
ng-bind-html
而只允许DOM操纵或使用@WilliamScott的答案中的类似内容,则事情会容易得多。关于javascript - AngularJS:无法弄清楚为什么在使用transclude:'element'进行转换时嵌套的 Angular Directive(指令)不被渲染,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25246317/