注意:答案是按照特定的顺序给出的,但由于许多用户根据投票而不是给出的时间对答案进行排序,因此这里是答案的索引,它们是最有意义的顺序:
(注意:这是Stack Overflow的C++常见问题解答的一个条目.如果你想批评在这种形式下提供常见问题解答的想法,那么发布所有这些的元数据的发布将是这样做的地方.这个问题在C++聊天室中受到监控,其中FAQ的想法一开始就出现了,所以你的答案很可能被那些提出想法的人阅读.)
创建指令时,可以将代码放入编译器,链接函数或控制器中.
在文档中,他们解释说:
但是,对我而言,目前尚不清楚哪种代码应该去哪里.
例如:我可以在编译中创建函数并将它们附加到链接中的作用域,还是仅将函数附加到控制器中的作用域?
如果每个指令都有自己的控制器,控制器如何在指令之间共享?控制器是真的共享还是只是范围属性?
有些地方似乎使用控制器功能用于指令逻辑而其他地方使用链接.角度主页上的选项卡示例使用控制器作为一个,并链接另一个指令.两者有什么区别?
有人可以简单解释一下吗?
文档似乎有点迟钝.我没有得到何时使用一个而不是另一个的本质和全局.两个对比的例子很棒.
我试图在控制器函数中访问指令的属性.但是,当我访问它时,它是未定义的.我注意到如果我做一个简单的计时器就行了.有没有办法只在指令执行后才能执行代码,并且它的范围已准备好并设置为使用?
我弄了一个小提琴.确保您的控制台已打开.http://jsfiddle.net/paulocoelho/uKA2L/1/
这是我在小提琴中使用的代码:
<div ng-app="testApp" >
<testcomponent text="hello!"></testcomponent>
</div>
Run Code Online (Sandbox Code Playgroud)
var module = angular.module('testApp', [])
.directive('testcomponent', function () {
return {
restrict: 'E',
template: '<div><p>{{text}} This will run fine! </p></div>',
scope: {
text: '@text'
},
controller: function ($scope, $element) {
console.log($scope.text); // this will return undefined
setTimeout(function () {
console.log($scope.text); // this will return the actual value...
}, 1000);
},
link: function ($scope, $element, $attrs) {
console.log($scope.text);
setTimeout(function () {
console.log($scope.text);
}, 1000);
}
};
});
Run Code Online (Sandbox Code Playgroud) 我对这个功能有些怀疑.
可以说我有这个指令:
.directive('hello', function () {
return {
template: '<div>Hello <span ng-transclude></span></div>',
restrict: 'E',
transclude: true,
compile: function() {
console.log('Compile()');
return {
pre: function() {
console.log('PreLink()');
},
post: function() {
console.log('PostLink()');
}
};
},
link: function postLink(scope, element, attrs) {
console.log('Link()');
}
};
}
Run Code Online (Sandbox Code Playgroud)
我将它添加到我的模板中:
<hello>World</hello>
Run Code Online (Sandbox Code Playgroud)
控制台日志:
Compile()
PreLink()
PostLink()
Run Code Online (Sandbox Code Playgroud)
那么为什么link()不被称为?
如果不是从compile()我返回一个对象,而是返回一个打印PreLink()控制台日志的函数:
Compile()
PreLink()
Run Code Online (Sandbox Code Playgroud)
如果我没有从Compile()控制台日志返回任何内容:
Compile()
Run Code Online (Sandbox Code Playgroud)
仍然link()没有被召唤.
如果我只是评论Compile()那么Link()最后打印:
Link()
Run Code Online (Sandbox Code Playgroud)
有人可以解释这一切吗?是Link()和Compile()意味着一起工作?我应该只使用Compile PreLink()和 …
如下所述:
http://docs.angularjs.org/guide/directive
Angular js指令采用两种不同类型的链接函数:
预链接功能在链接子元素之前执行.由于编译器链接功能无法找到正确的链接元素,因此进行DOM转换是不安全的.
链接后功能链接子元素后执行.在链接后功能中进行DOM转换是安全的.
此外,如果给定匿名函数,似乎默认键link将绑定到postLink.
我何时以及为什么要使用预链接功能?
我实现了一个指令,将子内容的多个片段转换为模板.它的工作原理,但似乎比我见过的大多数例子都简单,并提出了一些关于如何进行翻译的问题.
这是指令:
module.directive('myTransclude', function() {
return {
restrict: 'A',
transclude: true,
replace: true,
scope: true,
template: '<div style="border: 1px solid {{color}}"><div class="my-transclude-title"></div><div class="my-transclude-body"></div></div>',
link: function(scope, element, attrs, controller, transclude) {
// just to check transcluded scope
scope.color = "red";
transclude(scope, function(clone, scope) {
Array.prototype.forEach.call(clone, function(node) {
if (! node.tagName) {
return;
}
// look for a placeholder node in the template that matches the tag in the multi-transcluded content
var placeholder = element[0].querySelector('.' + node.tagName.toLowerCase());
if (! placeholder) {
return; …Run Code Online (Sandbox Code Playgroud)