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

只需对代码进行一次小修正，如果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>

希望这会有所帮助：）

针对您的问题的更具体的解决方案：

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

<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时，我们会禁用该按钮，这意味着我们不允许任何点击操作同时，浏览器会自动将指针图标更改为箭头，因为它是一个禁用按钮。

Answer 2

您的示例应该使用&&代替||。或者使用三元运算符（condition ? action : null）

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

像这样。

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 3

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

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

禁用ng-click

3 个答案: