禁用点击

Question

我正在尝试禁用 ng-click 指令。我有这个脚本，我在 kendo 网格

中调用

<script type="text/x-kendo-template" id="PnIssueCell">
    <span style="white-space: normal" ng-click="vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE || vm.HistoryPopup(vm.Drawing, true)">
        {{ dataItem.ID_PN_ISSUE }}
    </span>
</script>

我希望如果条件 vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE 为真，则必须启用该操作。

但有些地方工作不正常，实际上该行始终是可点击的。

有什么建议吗？

非常感谢

Answer 1

您应该使用 && 而不是 || 让您的示例工作。或者使用三元运算符 (condition ? action : null)

否则，如果您经常这样做，您可能需要创建一个指令来禁用点击事件并添加其他功能（例如切换某些 CSS class 以显示该操作已禁用).

类似这样。

HTML代码

<span disable-if="vm.Drawing.ID_PN_ISSUE != dataItem.ID_PN_ISSUE"
      ng-click="vm.HistoryPopup(vm.Drawing, true)">
    {{ dataItem.ID_PN_ISSUE }}
</span>

Javscript 代码

.directive('disableIf', function() {
    var inhibitHandler = function(event) {
        event.stopImmediatePropagation();
        event.preventDefault();
        return false;
    };

    return {
        retrict: 'A',
        priority: 100,
        scope: { disableIf: "=" },
        link: function($scope, element) {
            $scope.$watch('disableIf', function(disable) {
                if (disable) {
                    element.addClass('disabled')
                    element.on('click', inhibitHandler);
                }
                else {
                    element.removeClass('disabled')
                    element.off('click', inhibitHandler);
                }

                // you may want to add a handler to remove the
                // event listener when the scope is destroyed
            });
        }
    }
})

Answer 2

为什么不将 HistoryPopup 函数和 vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE 条件包装在一个单独的函数中？如果条件为真，则调用函数。

视图层（即您的 html 模板）不应包含或包含来自控制器的任何逻辑。

Answer 3

只是您代码中的一个小修正，如果 xpression 为 true，我将首先评估您的表达式。它会执行你的功能，否则它不会。

<script type="text/x-kendo-template" id="PnIssueCell">
    <span style="white-space: normal" ng-click="(vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE)?vm.HistoryPopup(vm.Drawing, true):null ">
        {{ dataItem.ID_PN_ISSUE }}
    </span>
</script>

希望对您有所帮助:)

更具体的问题解决方案：

正如我们在评论中讨论的那样，您想删除该元素上的指针图标（手形图标），然后您可以尝试使用按钮元素而不是 span.

<script type="text/x-kendo-template" id="PnIssueCell">
    <button type="button" style="white-space: normal" ng-click="vm.HistoryPopup(vm.Drawing, true)" ng-disabled="!(vm.Drawing.ID_PN_ISSUE == dataItem.ID_PN_ISSUE)">
        {{ dataItem.ID_PN_ISSUE }}
    </button>
</script>

现在你不需要担心禁用 ng-click 因为这里当表达式为 false 时，我们正在禁用按钮，这意味着我们不允许任何点击操作，同时，浏览器会自动将 pointer 图标更改为 arrow，因为它是一个禁用按钮。

禁用点击

Disable ng-click

angularjs

html

angularjs-ng-click