创建指令时,可以将代码放入编译器,链接函数或控制器中.
在文档中,他们解释说:
但是,对我而言,目前尚不清楚哪种代码应该去哪里.
例如:我可以在编译中创建函数并将它们附加到链接中的作用域,还是仅将函数附加到控制器中的作用域？
如果每个指令都有自己的控制器,控制器如何在指令之间共享？控制器是真的共享还是只是范围属性？
在编写Angular指令时,可以使用以下任何函数来操作声明指令的元素的DOM行为,内容和外观:
对于应该使用哪种功能似乎存在一些混淆.这个问题包括:
有些地方似乎使用控制器功能用于指令逻辑而其他地方使用链接.角度主页上的选项卡示例使用控制器作为一个,并链接另一个指令.两者有什么区别？
从指令Angular docs,我看到compile函数有3个参数,其中一个是transclude.文档提供的唯一解释是:
transclude - 一个transclude链接函数:function(scope,cloneLinkingFn).
我试图了解你在克隆链接功能中会做些什么.我甚至不知道哪些参数传递给它.我找到了一个示例,其中有一个参数被称为cloneHTML元素.还有其他参数吗？这究竟是哪个HTML元素？我也在考虑使用transclude: 'element'我的指令.执行这些问题的答案时,用改变'element'来代替true？
我用简单的例子来理解翻译,但我似乎无法找到更复杂的例子,尤其是transclude: 'element'.我希望有人能对这一切提供更全面的解释.谢谢.
Angular Documentation说: -
DOM的编译是通过调用$ compile()方法来执行的.该方法遍历DOM并匹配指令.如果找到匹配项,则将其添加到与给定DOM元素关联的指令列表中.一旦识别出给定DOM元素的所有指令,就按优先级对它们进行排序,并执行它们的compile()函数.
我认为ng-repeat指令的优先级低于自定义指令,在某些用例中,如动态id和自定义指令.角度是否允许修改指令的优先级来选择一个在另一个之前的执行？
我无法理解'ngRepeat'指令,因此我希望通过编写'double'指令然后使用'ntimes'指令进行扩展来了解angularjs的工作原理:so
<double>
<h1>Hello World</h1>
</double>
会导致产生:
<h1>Hello World</h1>
<h1>Hello World</h1>
<ntimes repeat=10>
<h1>Hello World</h1>
</ntimes>
会导致产生:
<h1>Hello World</h1>
.... 8 more times....
<h1>Hello World</h1>
在angular指令的编译函数中有一个pre和post.这个前置和后置真的和链接功能一样吗？
例如,在下面的代码中,链接函数是否相同(如果你愿意,则为快捷方式)作为下面的编译函数的前置和后置？
链接
....
link: {
pre: function(scope, elem, attr) {
//stuff
},
post: function(scope, elem, attr) {
//stuff
}
}
....
编译...
....
compile: function(tElem, tAttrs){
return {
pre: function(scope, iElem, iAttrs){
//stuff
},
post: function(scope, iElem, iAttrs){
//stuff
}
}
}
.....
javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我喜欢使用指令制作自定义组件.我检查了很多教程,让我感到困惑,任何人都可以解释指令是如何工作的.我计划制作的组件是
<shout-list></shout-list>
喊名单的模板就是这样的
<div class="shout" ng-repeat="shout in shouts">
<p>{{shout.message}}</p>
<img src="media/images/delete.png" width="32" height="32" ng-click="deleteShout({{$index}},'{{shout._id}}')"/>
</div>
请帮帮我,我们如何让AngularJS编译指令生成的代码？
你甚至可以在这里找到相同的代码,http://jsbin.com/obuqip/4/edit
HTML
<div ng-controller="myController">
{{names[0]}} {{names[1]}}
<br/> <hello-world my-username="names[0]"></hello-world>
<br/> <hello-world my-username="names[1]"></hello-world>
<br/><button ng-click="clicked()">Click Me</button>
</div>
使用Javascript
var components= angular.module('components', []);
components.controller("myController",
function ($scope) {
var counter = 1;
$scope.names = ["Number0","lorem","Epsum"];
$scope.clicked = function() {
$scope.names[0] = "Number" + counter++;
};
}
);
// **Here is the directive code**
components.directive('helloWorld', function() {
var directiveObj = {
link:function(scope, element, attrs) {
var strTemplate, strUserT = attrs.myUsername || "";
console.log(strUserT);
if(strUserT) {
strTemplate = "<DIV> Hello" + "{{" + …我正在尝试围绕这里概述的网格元素编写一个小的dsl:http://foundation.zurb.com/docs/grid.php
基本上我想做的是
<row>
<column two mobile-one>{{myText}}</col>
<column four centered mobile-three><input type="text" ng-model="myText"></input></col>
</row>
转变成:
<div class="row">
<div class="columns two mobile-one">{{myText}}</div>
<div class= "columns four centered mobile-three"><input type="text" ng-model="myText"></input></div>
</div>
理想情况下,我希望写一些可以采用任意嵌套的东西:row - > col - > row - > col - > row .....
我无法正确地迈出第一步 - 嵌套元素因为我无法弄清楚如何将子元素放入另一个模板而不会严重影响编译过程.
var app = angular.module('lapis', []);
app.directive('row', function(){
return {
restrict: 'E',
compile: function(tElement, attrs) {
var content = tElement.children();
tElement.replaceWith(
$('', {class: 'row',}).append(content));
}
}
});
只是没有做任何事情.失败的尝试在这里显示 - http://jsfiddle.net/ZVuRQ/
请帮忙!