与NG-禁用指令Angularjs按钮加载状态指示 [英] Angularjs Button loading state directive with ng-disabled directive
问题描述
我想用下面的指令通过引导JS插件更改按钮的加载状态调和:
I am trying to reconcile using the following directive for changing a button's loading state via bootstrap js plugin:
.directive("btnLoading", function() {
return function(scope, element, attrs) {
scope.$watch(function() {
return scope.$eval(attrs.btnLoading);
}, function(loading) {
if (loading)
return element.button("loading");
element.button("reset");
});
};
这是合作得非常好,因为它控制按钮的状态,在必要时添加加载文本广告。我遇到的问题是,当该指令被应用到一个按钮,以及采用NG-禁用当表单无效,该按钮被启用,而不是禁用,因为它应该/曾经是我之前应用这个指令按钮。我的NG-禁用按钮就是:
This is working quite well as it controls the state of the button when necessary and adds the loading text as advertised. The issue I am running into is that when this directive is applied to a button as well as utilizing ng-disabled when the form is not valid, the button is enabled and not disabled as it should/used to be before I applied this directive to the button. My ng-disabled on the button is just:
ng-disabled="form.$invalid"
有没有办法调和这两个指令使禁用状态没有加载指令中重置?
Is there a way to reconcile these two directives so the disabled state is not reset within the loading directive?
修改
根据您的建议我结束了以下code:
EDIT Based on your suggestion I ended up with the following code:
.directive("btnLoading", function () {
return function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.ngDisabled);
}, function (newVal) {
//you can make the following line more robust
if (newVal) {
return;
} else {
return scope.$watch(function () {
return scope.$eval(attrs.btnLoading);
},
function (loading) {
if (loading) return element.button("loading");
element.button("reset");
});
}
});
};
})
我不得不用一个函数来观察对EVAL变化NG-残疾人否则只会返回它需要什么来评价更改,而不是值/改变值的功能。此外那么我增加了手表的BTN装载观看的点击/保存事件,一旦改变然后设置加载状态。不知道这是最好的选择,但是这是唯一的工作code我能想出。
I had to use a function to watch for changes on eval of ng-disabled otherwise it would only return the function of what it needed to evaluate for changes, not the value/changed value. Additionally then I added the watch for the btn loading to watch for the click/save event and once that changes then set the loading state. Not sure if this is the best option but that was the only working code I could figure out.
推荐答案
您可以收听到父的范围NG-禁用
属性,如果它被禁用,然后只是简单地什么也不做。
You can listen to the ng-disabled
property in the parent's scope, and if it is disabled then just simply does nothing.
关键是看对 ngdisabled
属性像这样
scope.$watch(attrs.ngDisabled, function (newVal) {...
我想阐明,因为我离不开件等测试code一些光,你也许可以做这样的事情:
I want to shed some light on since I can't test your code without other pieces, you probably can do something like this:
.directive("btnLoading", function () {
return function (scope, element, attrs) {
//maybe you need just scope.$watch instead of scope.$parent.$watch. Depends on your impl.
scope.$parent.$watch(attrs.ngDisabled, function (newVal) {
//you can make the following line more robust
if (newVal === 'disabled' || newVal === 'true') return;
function () {
return scope.$eval(attrs.btnLoading);
},
function (loading) {
if (loading) return element.button("loading");
element.button("reset");
}
});
}
});
这篇关于与NG-禁用指令Angularjs按钮加载状态指示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!