- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个名为“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()
,你可以看看到底发生了什么。
关于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/
我对这个错误很困惑: Cannot implicitly convert type 'System.Func [c:\Program Files (x86)\Reference Assemblies\
考虑这段代码: pub trait Hello { fn hello(&self); } impl Hello for Any { fn hello(&self) {
问题很简单。是否可以构造这样一个类型 T,对于它下面的两个变量声明会产生不同的结果? T t1 = {}; T t2{}; 我已经研究 cppreference 和标准一个多小时了,我了解以下内容:
Intellij idea 给我这个错误:“Compare (T, T) in Comparator cannot be applied to (T, T)” 对于以下代码: public class
任何人都可以告诉我 : n\t\t\t\t\n\t\t\t 在以下来自和 dwr 服务的响应中的含义和用途是什么. \r\n\t\t\t \r\n\t\t\t
让 T 成为一个 C++ 类。 下面三个指令在行为上有什么区别吗? T a; T a(); T a = T(); T 为不带参数的构造函数提供了显式定义这一事实是否对问题有任何改变? 后续问题:如果
Rust中的智能指针是什么 智能指针(smart pointers)是一类数据结构,是拥有数据所有权和额外功能的指针。是指针的进一步发展 指针(pointer)是一个包含内存地
比如我有一个 vector vector > v={{true,1},{true,2},{false,3},{false,4},{false,5},{true,6},{false,7},{true,8
我有一个来自 .xls 电子表格的数据框,我打印了 print(df.columns.values) 列,输出包含一个名为:Poll Responses\n\t\t\t\t\t。 我查看了 Excel
This question already has answers here: What are good reasons for choosing invariance in an API like
指针类型作为类型前缀与在类型前加斜杠作为后缀有什么区别。斜线到底是什么意思? 最佳答案 语法 T/~ 和 T/& 基本上已被弃用(我什至不确定编译器是否仍然接受它)。在向新向量方案过渡的初始阶段,[T
我正在尝试找到一种方法来获取模板参数的基类。 考虑以下类: template class Foo { public: Foo(){}; ~Foo(){};
这是一个让我感到困惑的小问题。我不知道如何描述它,所以只看下面的代码: struct B { B() {} B(B&) { std::cout ::value #include
为什么有 T::T(T&) 而 T::T(const T&) 更适合 copy ? (大概是用来实现move语义的???) 原始描述(被melpomene证明是错误的): 在C++11中,支持了一种新
在 Java 7 中使用 eclipse 4.2 并尝试实现 List 接口(interface)的以下方法时,我收到了警告。 public T[] toArray(T[] a) { ret
假设有三个函数: def foo[T](a:T, b:T): T = a def test1 = foo(1, "2") def test2 = foo(List(), ListBuffer()) 虽
我对柯里化(Currying)和非柯里化(Currying)泛型函数之间类型检查的差异有点困惑: scala> def x[T](a: T, b: T) = (a == b) x: [T](a: T,
考虑一个类A,我如何编写一个具有与相同行为的模板 A& pretty(A& x) { /* make x pretty */ return x; } A pretty(A&& x) {
Eclipse 表示由于泛型类型橡皮擦,类型参数不允许使用 instanceof 操作。 我同意在运行时不会保留任何类型信息。但是请考虑以下类的通用声明: class SomeClass{ T
在 C++14 中: 对于任何整数或枚举类型 T 以及对于任何表达式 expr: 有没有区别: struct S { T t { expr }; }; 和 struct S { T t = { exp
我是一名优秀的程序员,十分优秀!