Question

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

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

在模板中

错误

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

使用ng-disabled='disabled'代替ng-disabled='{{disabled}}'

在这种情况下，您正在传递精确的布尔值，而您正在执行的操作是-每次传递字符串值时，该值被认为是正确的。

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

isDisabled: '&isDisabled'

&用于计算表达式或回调，如果您想传递变量。检出此great article以确定正确的绑定，然后将代码替换为

isDisabled: '@'

ng-disabled内部自定义指令不起作用

1 个答案: