在此页面中:http://docs.angularjs.org/guide/directive
指令定义对象
终奌站
如果设置为true,则当前优先级将是将执行的最后一组指令(当前优先级的任何指令仍将执行,因为未定义相同优先级的执行顺序).
我不太懂.什么current priority意思？如果有这样的指令:
请注意directive4有terminal:true和其他人有false.
如果有一个html标签包含所有5个指令:
<div directive1 directive2 directive3 directive4 directive5></div>
5指令的执行顺序是什么？
compileangularjs'指令的功能有两个功能:preLink和postLink.
预连接功能
在子元素链接之前执行.由于编译器链接功能无法找到正确的链接元素,因此进行DOM转换是不安全的.
后连接功能
链接子元素后执行.在链接后功能中进行DOM转换是安全的.
它告诉我们不应该做什么preLink,我想知道什么时候应该使用preLink什么？我刚刚使用过的大部分时间postLink.有什么情况我们必须使用它吗？
如下所述:
http://docs.angularjs.org/guide/directive
Angular js指令采用两种不同类型的链接函数:
预链接功能在链接子元素之前执行.由于编译器链接功能无法找到正确的链接元素,因此进行DOM转换是不安全的.
链接后功能链接子元素后执行.在链接后功能中进行DOM转换是安全的.
此外,如果给定匿名函数,似乎默认键link将绑定到postLink.
我何时以及为什么要使用预链接功能？
我正在尝试验证从后端端点给我的一些表单字段...
所以基本上这些input元素是在a里面动态创建的ng-repeat.因此,input属性也被动态添加,如type,name等...
但是因为name属性是动态添加的,所以当我尝试验证它时,例如:
myForm.elName.$valid
它没有返回任何东西,因为在这一点上,它不知道是什么elName.
我创建了一个jsFiddle来演示这个问题:http: //jsfiddle.net/peduarte/HB7LU/1889/
任何帮助或建议将不胜感激!
FANX.
编辑:
我一直在提到这个AWESOME文档:http://docs.angularjs.org/api/ng.directive:
input.email
我正在尝试编写一个角度指令,为标签添加验证属性,但它似乎没有工作.这是我的演示.您将注意到,如果删除第二个输入框中的文本,"Is Valid"仍然为true,但如果删除第一个输入框中的文本则为false.
http://plnkr.co/edit/Rr81dGOd2Zvio1cLYW8D?p=preview
这是我的指示:
angular.module('demo', [])
.directive('metaValidate', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.attr("required", true);
}
};
});
我猜我只是缺少一些简单的东西.
我正在为Angular开发基于UI和排版的指令.在这种情况下,指令所应用的元素是未知的 - 从div,span,h1到h5.
使用模板的原因是我可以添加ng-*指令(因此开发人员不需要记住除指令名称之外的任何内容).
我添加属性和重新编译元素的成功有限.ng-transclude然而,在添加时却没有成功.创建一个新元素并替换旧元素会带来集成问题(忽略元素上可能存在的其他指令和数据属性),复制这些属性并将它们添加到新元素几乎没有成功.
这看起来应该非常简单,因为template它本身可以将元素更改为您指定的任何内容(使用transclude和replace),肯定有'漫长的做法'？
太糟糕了,你不能做到以下几点:
module.directive( 'myDir', [ '$window', function( $window ) {
return {
restrict: "A",
controller: function( $scope, $element ) {
$scope.tag = $element[0].nodeName;
}
template: "<{{tag}} data-ng-transclude ng-*=''></{{tag}}>",
transclude: true,
replace: true,
link: function ( scope, element, attrs ) {
}
}
}]);
我认为主要问题是我希望用模板替换和转换元素,而不是将模板(或编译元素)作为子项添加.
我已经ng-*在我的代码中替换了对vanilla JS 的需求和模板,例如:
<div data-ng-style="{'font-size':fontSize}></div>
同
element[0].style.fontSize = scope.fontSize;
这引出了使用许多ng-*指令的好处的问题？它只是'Angular方式'吗？
我正在尝试使用该指令基于某个属性的值将该multiple属性添加到指令中.不幸的是,那不适合我.我已经设置了一个示例来展示正在发生的事情.ui-selectng-attr-
我有一个我构建的大型Web表单(超过100个字段),我想添加AngularJS以使用户能够键入表单并运行Javascript以在键入时将Angular Model存储在数据库中.很明显,每次用户改变一小段数据时我都不想将数据发送到数据库,因此我想使用该ng-model-options指令告诉Angular只updateOn在500ms左右后触发.
我真的不想对<input>我的HTML中的每个标签应用大量的角度,但这是很多打字,如果我想要改变一些东西,那么很多地方都需要经过并手动更新.$("input").setDirective()如果它存在的话,我真正喜欢做的事情就是或类似的事情.我意识到我正在以jQuery类型的方式思考这个问题,所以我有兴趣听到将相同的指令集应用于我的DOM中与某些选择器匹配的每个元素的"正确"Angular方法.
谢谢!
我想用装饰有一个标准的输入控制ng-model和ng-required,然后添加自己的自定义属性的指令,它提供uib-typeahead的功能来控制.
我用这个链接让我的指令部分工作.
PLUNKR - 指令的版本2无法与ng-model一起正常工作
我的指令确实添加了typeahead功能并且运行良好,但是在选择项目后它不会将模型绑定到控件上.
我有两个版本的指令.
版本1:是一个元素样式指令,我已经成功使用了一段时间,但是当我不想对输入元素进行更多控制时,它就失败了,特别是当我想使用ng-required ='时true'和其他ng-message指令.
版本2:是一个属性样式指令,我接受了这个,因为我觉得最好只添加我想要的任何标准HTML的typeahead功能ng-required='true',ng-model等等......
虽然这个指令大部分都在工作,但它没有正确地与之交互ng-model,我不知道如何让它工作
angular.module(APP)
.directive('wkLocationSuggest', ['$compile', function ($compile) {
return {
restrict: 'A',
require: 'ngModel',
replace: false,
//terminal: true,
//priority: 0,
scope: {
wkApiModel: '=' // Provide access to the internal data that is returned via the API lookup
},
controller: 'LocationSuggestController',
link: function (scope, element, attrs, ngModelCtrl) {
if (!ngModelCtrl) {
return;
}
element.attr('typeahead', 'location as …我有以下代码:
app.directive "ngDisableOnVar", ($compile) ->
restrict: "A"
terminal: true
priority: 1000
replace:false
scope: {}
compile: compile = (element, attrs) ->
cattr = attrs["ngDisableOnVar"]
element.attr("ng-class", "{'disabled': !#{cattr}}")
element.attr("ng-disabled", "!#{cattr}")
element.removeAttr("ng-disable-on-var")
pre: preLink = (scope, iElement, iAttrs, controller) ->
post: postLink = (scope, iElement, iAttrs, controller) ->
$compile(iElement)(scope)
我试着将代码基于这里给出的答案.基本上,我想要以下内容:
<input ngDisableOnVar="someScopeVariable>
并将其替换为以下内容:
<input ng-class="{'disabled': !someScopeVariable}" ng-disabled="!someScopeVariable">
有些东西是错误的,因为即使我将它们应用于我的元素,它们也总是被禁用,即使范围变量的计算结果为true.我究竟做错了什么？
编辑:我创建了一个plunker,其中前两个按钮是使用ng-class和ng-disabled创建的,另外两个按钮应该通过使用该指令应用相同的东西.
以下是具有共享范围的plunker版本:http://plnkr.co/edit/TebCQL20ubh5AgJ6nMIl？p = preview
这是没有共享范围的那个:http://plnkr.co/edit/CPm55MrHA8z6Bx4GbxoN？p = preview
问题是,没有共享范围的那个不会更新.如何让它们更新,并且条件取决于作为参数传递的变量？
编辑#2:我开始相信范围共享是这两个按钮应该采取行动的正确方式,而不是创建一个封装其中的两个按钮的新指令.不过100%肯定.