动态角度属性的元素从指令添加 [英] Dynamically add angular attributes to an element from a directive
问题描述
我想建立一个变化缓慢的Ajax调用按钮加载状态的指令。基本上,这个想法是一个属性NG加载设置为一个按钮元素,让指令添加东西的其余部分。
I'm trying to build a directive that change loading status on buttons for slow ajax calls. Basically the idea is to set an attribute "ng-loading" to a button element, and let the directive add the rest of stuff.
这是HTML code:
This is the html code:
<button class="btn btn-primary" name="commit" type="submit" ng-loading="signupLoading">
Submit
</button>
这是指令code:
And this is the directive code:
.directive('ngLoading', ['$compile', function($compile) {
return {
restrict: 'A',
replace: false,
terminal: true,
link: function(scope, element, attrs) {
element.attr('ng-class', '{loading:' + attrs['ngLoading'] +'}');
element.attr('ng-disabled', attrs['ngLoading']);
element.append(angular.element('<img class="loading-icon" src="/assets/images/loading-icon.gif"/>'));
$compile(element.contents())(scope);
}
};
}]);
这一切看起来正确,所呈现的HTML,但是从指令添加的属性不funcioning的。我可以将这些属性移动到HTML code和一切都很正常,但是这在很多地方颇有些多余的code。
It all looks correct in the rendered HTML, but the attributes added from the directive is not funcioning at all. I can move those attributes to the HTML code and everything works great, but that's quite some redundant code in many places.
我引用的帖子<一个href=\"http://stackoverflow.com/questions/21717586/angular-directive-to-dynamically-set-attributes-on-existing-dom-elements\">Angular指令动态地设置在现有的DOM元素属性的(S),但它并没有解决我的问题。
I referenced the post Angular directive to dynamically set attribute(s) on existing DOM elements but it does not solve my problem.
任何意见/建议都欢迎。先谢谢了。
Any comment/suggestion are welcome. Thanks in advance.
推荐答案
您无需重新编译指令,如果你想要的是一些DOM操作,就可以添加和删除问候类作用域属性的变化。您可以使用$来代替观看
You don't need to recompile that directive if all you want is some DOM manipulation, you can add and remove class in regards to the changes of a scope property. You can use $watch instead.
JAVASCRIPT
.directive('ngLoading', function() {
return function(scope, element, attrs) {
var img = angular.element('<img class="loading-icon" src="/assets/images/loading-icon.gif"/>');
element.append(img);
scope.$watch(attrs.ngLoading, function(isLoading) {
if(isLoading) {
img.removeClass('ng-hide');
element.addClass('loading');
element.attr('disabled', '');
} else {
img.addClass('ng-hide');
element.removeClass('loading');
element.removeAttr('disabled');
}
});
};
});
注意:您code不起作用,因为它编译元素的内容,其中不重视你,你已经实现了属性元素本身
Note: Your code doesn't work because it compiles the contents of the elements the not the element itself wherein you attach the attributes you have implemented.
尝试 $编译(ELEM)(范围);
,它应能正常工作,但我不建议这样做,因为这样的指令,每一个元素将不得不重新重新编译。
try $compile(elem)(scope);
and it should work properly, but I don't recommend it because each element with such directive will have to re-compile again.
更新:
使用前 $编译
删除属性ngLoading'的元素,以prevent无限的汇编。
UPDATE:
before using $compile
remove the attribute 'ngLoading' to the element to prevent infinite compilation.
elem.removeAttr('ng-loading');
$compile(elem)(scope);
这篇关于动态角度属性的元素从指令添加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!