与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屋！