Question

我正在尝试使用以下指令协调以通过bootstrap js插件更改按钮的加载状态：

.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="form.$invalid"

有没有办法协调这两个指令，以便在加载指令中不重置禁用状态？

修改根据您的建议，我最终得到了以下代码：

   .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加载的监视以观察单击/保存事件，一旦更改，则设置加载状态。不确定这是否是最佳选择，但这是我能想到的唯一可行代码。

Answer 1

您可以在父级范围内收听ng-disabled属性，如果已禁用，则只是不执行任何操作。

诀窍是观看ngdisabled这样的属性

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

我想说明一点，因为我不能在没有其他部分的情况下测试你的代码，你可能会做这样的事情：

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

Angularjs Button使用ng-disabled指令加载state指令

1 个答案: