ng Click 并在模板锚标记上禁用 ng答案

【问题标题】：ngClick and ngDisabled on templated anchor tagng Click 并在模板锚标记上禁用 ng
【发布时间】：2016-01-21 02:52:28
【问题描述】：

我正在研究以下指令：

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 必须检查它是否应该触发。

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

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

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

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

Demo here

【讨论】：

您的示例未使用指令。你能把它扩大到更接近我的问题吗？为什么&& 可以工作，而|| 不行？
@ricksmt 你没看过 plunkr 吗？
是的。您不使用指令，只使用控制器和默认范围。

【解决方案2】：

将disabled: '@' 更改为disabled: '='。

只读参数 ('@') 以字符串形式传入，而与分配给参数的变量类型无关。您想使用布尔值；双向参数 ('=') 保持类型。

【讨论】：