1

我正在尝试使用以下指令进行协调，以通过引导 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 只是：

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 加载的监视以监视单击/保存事件，一旦发生更改，然后设置加载状态。不确定这是否是最佳选择，但这是我能弄清楚的唯一有效代码。

4

1 回答 1

2

您可以在父级范围内收听该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");
            }
        });
    }
});
于 2013-08-02T15:08:07.767 回答