应用ng-pressstart和ng-pressend指令后，Angularjs ng-click不起作用

Angularjs ng-click is not working after applying ng-pressstart and ng-pressend directives

本文关键字：Angularjs ng-click 不起作用 指令 ng-pressstart ng-pressend 应用      更新时间：2023-09-26

我有一个angular应用程序，它在桌面浏览器上运行良好。但当我尝试在安卓chrome上打开它后，ng-click就很少工作了。点击100次后，它可能会工作并触发点击。在分析了代码后，我找到了原因，我创建了一个js文件来创建新的角度指令：

var app;
var getOnTouchEndEventName = function () {
    var isTouchSupported = "ontouchend" in document;
    if (isTouchSupported) {
        return "touchend";
    } else {
        return "mouseup";
    }
};
var getOnTouchStartEventName = function () {
    var isTouchSupported = "ontouchend" in document;
    if (isTouchSupported) {
        return "touchstart";
    } else {
        return "mousedown";
    }
};
app.directive("ngPressstart", [function () {
    return function (scope, elem, attrs) {
        elem.bind(getOnTouchStartEventName(), function (e) {
            e.preventDefault();
            e.stopPropagation();
            scope.$apply(attrs["ngPressstart"]);
        });
    }
}]);
app.directive("ngPressend", [function () {
    return function (scope, elem, attrs) {
        elem.bind(getOnTouchEndEventName(), function (e) {
            e.preventDefault();
            e.stopPropagation();
            scope.$apply(attrs["ngPressend"]);
        });
    }
}]);

因此有两个指令：ng-pressstart和ng-pressend，目的是为移动和桌面浏览器使用一个指令。例如，如果其移动设备，则getOnTouchEndEventName()将返回触摸端。否则其CCD_ 5。

修复此实现的方法是什么？

即使我没有使用这些指令，问题也会发生。

正如我在评论中所说，该文件开头的声明不是angular的正确语法。通过在此文件中声明var app;，您无意中导致了名称冲突。

向有角度的模块添加组件的正确方法是使用模块getter语法。

建议以角度管理模块的方法是根本不使用变量。https://github.com/johnpapa/angular-styleguide#style-y021

例如，当声明您的angular应用程序时，而不是执行：

var app = angular.module('game1', []);

你可以简单地使用：

angular.module('game1', []);

在声明一个组件（控制器、指令、过滤器等）时，可以使用链接getter语法。https://github.com/johnpapa/angular-styleguide#style-y022

angular
  .module('game1')
  .directive("ngPressstart", [function () {

这样可以确保您永远不会发生命名冲突，并使代码更具可读性。

相关文章：