时间戳

首页 > 解决方案 > 自定义指令中的 ng-disabled 不起作用

angularjs - 自定义指令中的 ng-disabled 不起作用

问题描述

我正在尝试实现一个自定义指令，强制用户按住一个按钮而不是单击它，以防止出现许多错误。按钮下方有一个材料设计滑块，以显示用户必须单击按钮多长时间。

但有时，必须在某些情况下按钮不可点击，例如，如果表单的值不正确。我试图设置 ng-disabled 属性，但没有任何效果。我究竟做错了什么 ？

JS：

negoceExpedApp.directive('rkMouseHold', function ($interval, $timeout) {
    return {
        restrict: 'E',
        scope: {
            text: '=buttonText',
            callback: '&callback',
            isDisabled: '&isDisabled'
        },
        replace: true,
        template: "<div style='width:fit-content'>" +
            "<md-button ng-disabled='{{disabled}}' class='md-accent md-raised md-hue-400'>{{ text }} - {{ disabled }}</md-button><br>" +
            "<md-progress-linear ng-show='c!=0' class='md-accent md-hue-400' md-mode='determinate' value='{{c/10}}'></md-progress-linear>" +
            "</div>",
        link: function (scope, element, attrs) {
            scope.$watch(scope.isDisabled,(newVal)=>{
                console.log("%c newVal","color:orange",newVal);
                if(newVal==true){
                    scope.disabled = "true";
                } else {
                    scope.disabled = 'false';
                }
            })
            scope.c = 0;
            scope.loop = null;
            element.on('mousedown', () => {
                scope.loop = $interval(function () {
                    $timeout(() => {
                        scope.c += 100
                    }, 0);
                }, 100);
            });

            element.on('mouseup', () => {
                $interval.cancel(scope.loop);
                if (scope.c > 1000) {
                    scope.callback();
                }
                scope.c = 0;
            })
        }
    }
})

网页：

<rk-mouse-hold callback="ctrl.saveForm()"
               is-disabled="expedForm.$invalid"
               button-text="'HOLD TO SAVE'">
</rk-mouse-hold>

标签： angularjsangularjs-directiveangularjs-ng-disabled

解决方案

ngDisabled只是常规指令的总结disabled，它支持插值。现在在这里你如何设置禁用值

   if(newVal==true){
        scope.disabled = "true";
    } else {
        scope.disabled = 'false';
    }

可以简化为

  scope.disabled = !!newVal;

并且在模板中

错误

<md-button ng-disabled='{{disabled}}' class='md-accent md-raised md-hue-400'>
    {{ text }} - {{ disabled }}
</md-button><br>"

使用ng-disabled='disabled'而不是ng-disabled='{{disabled}}'

在这种情况下，您传递的是精确的布尔值，而您所做的 - 每次传递字符串值时，都被认为是 true。

毕竟，在您的范围内，您像这样定义了自定义禁用

isDisabled: '&isDisabled'

&用于评估表达式或回调，如果你想传递一个变量。查看这篇很棒的文章以了解正确的绑定，并将您的代码替换为

isDisabled: '@'

推荐阅读