Question

我正在处理以下指令：

module.directive('myButton', function () {
    var directive = {
        compile: compile,
        restrict: 'E',
        scope: {
            type: '@',
            click: '&',
            disabled: '@'
        },
        template: '<a class="my-button my-button-{{type}}" data-ng-click="disabled || click()"><ng-transclude /></a>',
        transclude: true
    };

    function compile(element, attributes) {
        if (typeof attributes.click == 'undefined') attributes.click = function () { };
        if (typeof attributes.disabled== 'undefined') attributes.disabled = false;
    }

    return directive;
});

我在页面上有一些看起来像这样的假人：

<my-button type="1a" click="alert('Button 1a works!')" disabled="false">Test A</my-button>

我似乎无法使按钮的单击和禁用功能正常工作（至少不能同时工作）。我已经设置了锚标签，因此它看起来像一个按钮。锚标记不受disabled属性的影响，因此ngClick必须检查它是否应该触发。

如何让点击和停用功能按预期工作？

Answer 1

您可以通过&&条件而不是||来实现此目的。基本上，如果禁用标志为true，那么ng-click表达式将无法进一步评估。如果为false，则调用click方法。看看附带的plunkr示例。

data-ng-click="!disabled && click()"

Demo here

Answer 2

将IconImageUtilities.setIconImage(this);更改为disabled: '@'。

只读参数（disabled: '='）作为字符串传入，而不管分配给参数的变量的类型如何。你想使用布尔值;双向参数（'@'）会保留该类型。

模板化锚标签上的ngClick和ngDisabled

2 个答案: