我正在寻找写两个角度指令,一个父指令和一个子指令,以创建可排序和可克隆的小部件。预期的标记是:
<div class="widget-container" data-sortable-widgets>
<section class="widget" data-cloneable-widget></section>
<div>
但是,子指令似乎在父元素之前,某个元素可用之前执行(子元素由父元素添加):
function SortableWidgetsDirective() {
return {
priority: 200,
restrict: 'A',
link: function ($scope, element, attrs) {
element.find(".widget header").append($("<div class='widget-controls'></div>"));
element.sortable({ });
}
};
}
function CloneableWidgetDirective() {
return {
priority: 100,
restrict: 'A',
link: function ($scope, element, attrs) {
// This directive wrongfully executes first so widget-controls is no available
element.find("header .widget-controls").append($("<div class='clone-handle'></div>"));
}
};
}
如您所见,我尝试设置优先级,但我认为由于它们位于不同的元素上,因此无法正常工作。
如何让父母先执行?
postLink()
以相反的顺序执行,这意味着子指令postLink()
将在父指令之前(即深度优先)被调用。由于某种原因,这是默认行为(link()
实际上是指postLink()
)。幸运的是,我们也有preLink()
,它的工作方式正相反-
我们可以利用它来受益。
为了说明这一点-以下代码片段:
app.directive('parent', function($log) {
return {
restrict: 'E',
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
$log.info('parent pre');
},
post: function postLink(scope, iElement, iAttrs, controller) {
$log.info('parent post');
}
}
}
};
});
app.directive('child', function($log) {
return {
restrict: 'E',
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
$log.info('child pre');
},
post: function postLink(scope, iElement, iAttrs, controller) {
$log.info('child post');
}
}
}
};
});
…将输出以下内容:
> parent pre
> child pre
> child post
> parent post
看吧live on plunker
。
如果我们希望在子代指令之前执行父代指令的逻辑,我们将显式使用preLink()
:
function SortableWidgetsDirective() {
return {
restrict: 'A',
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
iElement.find(".widget header").append($("<div class='widget-controls'></div>"));
iElement.sortable({});
},
post: angular.noop
}
}
};
}
function CloneableWidgetDirective() {
return {
restrict: 'A',
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {
iElement.find("header .widget-controls").append($("<div class='clone-handle'></div>"));
},
post: angular.noop
}
}
};
}
$compile
AngularJS文档上的服务。顺便说一句,您是正确的- priority
打算与共享相同元素的指令一起使用。
angular.noop
只是一个空方法,什么也不返回。如果仍然要使用这些postLink()
函数,请像通常那样放置函数声明,即:
post: function postLink(scope, iElement, iAttrs, controller) { ... }
谨防使用templateUrl
,例如 “由于模板加载是异步的 , 因此在加载模板之前,将暂停编译/链接” [源代码]。结果,执行顺序将被破坏。您可以通过包括在template
属性中内联的模板来解决此问题。
问题内容: 这不是一件很难的事,但我无法弄清楚如何做到最好。 我有一个父指令,像这样: 和一个子指令: 如何从子指令轻松访问父指令的和属性?在我的链接函数中,我可以访问父级作用域-我应该用来观察这些属性吗? 放在一起,我想拥有的是: 这个想法是默认情况下显示一组字段。如果单击,它们将成为输入并可进行编辑。 问题答案: 从这篇SO帖子中汲取灵感,我在这个笨拙的人中有一个可行的解决方案。 我不得不改变
问题内容: 我不确定这是这样做的方法,但是我的目标是: 我有一个家长指令 在父指令的代码块中,我有一个子指令,它将从用户那里获得一些输入 子指令将在父指令的范围内设置一个值 我可以从那里拿走 当然,问题在于父和子指令是同级的。所以我不知道该怎么做。注意-我不想在 小提琴:http : //jsfiddle.net/rrosen326/CZWS4/ 的HTML: Java脚本 问题答案: 如果要进行
< code>SYSCALL和< code>SYSRET(及其32位的英特尔对应产品< code>SYSENTER和< code>SYSEXIT)通常被描述为比调用门或软件中断“更快”地进入和退出x86处理器中的管理模式,但这一说法背后的确切数字在很大程度上仍未得到证实。特别是,我能找到的所有英特尔或AMD优化指南都没有提到这些指令。所以: 和 在最近的 Intel 64 微体系结构中执行了多少个
问题内容: 我有两个Angular指令,一个嵌套在另一个内,如下所示。 的HTML responseGroup.template.html responseOption.template.html 的JavaScript 我希望子指令可以访问父指令中的“ response-group-id”字段。我该怎么做呢?我能够通过让子指令要求父指令,然后在子指令的“ link”方法中获取它来获取值,但是那时
问题内容: 确实为此感到挣扎-尝试了我能想到的所有方法。希望有人可以提供帮助。 我有一条指令可以为我创建自定义控件的轮廓。定制控件的中心部分将由另一个动态生成的指令表示,该指令基于外部指令上的作用域变量的值。作用域变量包含内部指令的名称。我这样做是因为我的页面将包含多个动态生成的元素,这些元素均具有相同的布局,但内部内容不同。 即我的外部指令的示例: 设置为另一个指令的名称-在这种情况下。因此,我