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

Question

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

但有时，必须有按钮不能点击的时刻，例如，如果表单的值不正确。我试图设置 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;
            })
        }
    }
})

Html :

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

Answer 1

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

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

可以简化为

  scope.disabled = !!newVal;

并在模板中

ERRONEOUS

<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'

& 用于评估表达式或回调，如果你想传递一个变量。检查此 great article 是否正确绑定，并将您的代码替换为

isDisabled: '@'

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

ng-disabled inside custom directive isn't working

angularjs

angularjs-directive

angularjs-ng-disabled