带有 ng-disabled 指令的 Angularjs 按钮加载状态指令 [英] Angularjs Button loading state directive with ng-disabled directive

问题描述

我正在尝试使用以下指令进行协调，以通过 bootstrap 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-disabled 时，按钮将被启用，而不是像在我应用此指令之前那样/过去那样禁用按钮.我在按钮上的 ng-disabled 只是:

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?

编辑根据您的建议，我最终得到了以下代码:

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");
                   });
               }
           });
       };
   })

我不得不使用一个函数来监视 ng-disabled 的 eval 的变化，否则它只会返回它需要评估变化的函数，而不是值/更改的值.此外，我添加了 btn 加载的监视以监视单击/保存事件，一旦发生更改，则设置加载状态.不确定这是否是最好的选择，但这是我能弄清楚的唯一工作代码.

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-disabled 属性，如果它被禁用，则什么都不做.

You can listen to the ng-disabled property in the parent's scope, and if it is disabled then just simply does nothing.

诀窍是像这样观察 ngdisabled 属性

The trick is to watch on ngdisabled property like this

scope.$watch(attrs.ngDisabled, function (newVal) {...

我想说明一下，因为我无法在没有其他部分的情况下测试您的代码，您可能可以执行以下操作:

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-disabled 指令的 Angularjs 按钮加载状态指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！