gpt4 book ai didi

javascript - AngularJS : Can't figure out why nested angular directive does not get rendered when transcluding with transclude :'element'

转载 作者:行者123 更新时间:2023-11-28 01:04:21 24 4
gpt4 key购买 nike

我有一个名为“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>

正如您将看到的,我的目标是渲染 Controller 提供的数据的输出,而不是操纵 dom。我正在探索使用指令作为收集数据并将其提供给 Controller 的一种手段,以便模板可以根据 Controller 提供的数据进行渲染。因此,我正在寻找一种不在 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 -->

这是因为子面板指令有transinclude: 'element',并且其链接函数尚未运行。

要解决这个问题很简单,只需稍微修改一下代码即可:

var clone = transclude(scope, function () {});
panelCtrl.setBody($sce.trustAsHtml(clone.html()));

这样,克隆将包含一个像这样的真实模板:

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>

不足为奇,我们现在有了一个真正的模板,但绑定(bind)尚未发生,所以此时我们仍然无法使用 clone.html()

真正的问题开始了:我们如何知道绑定(bind)何时完成

据我所知,我们不知 Prop 体时间。但要解决这个问题,我们可以使用 $timeout!

通过使用$timeout,我们打破了正常的编译周期,因此我们必须找到某种方法让父面板指令知道子指令的绑定(bind)已经完成(在 $超时)。

一种方法是使用 Controller 进行通信,最终代码如下所示:

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

Plunker 示例: http://plnkr.co/edit/BBbWsUkkebgXiAdcnoYE?p=preview

我在plunker中留下了很多console.log(),你可以看看到底发生了什么。

PS。如果您不使用 ng-bind-html 并仅允许 DOM 操作或使用 @WilliamScott 的答案中的内容,事情会容易得多。

关于javascript - AngularJS : Can't figure out why nested angular directive does not get rendered when transcluding with transclude :'element' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25246317/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com