如何修复Angular不使用显式注释并且不能在严格模式下调用的问题

how to fix Angular not using explicit annotation and cannot be invoked in strict mode

本文关键字：不能 模式 问题 调用 Angular 何修复 注释      更新时间：2023-09-26

我使用严格模式和Angular 1.4.7，我得到以下错误：

Error: [$injector:strictdi] function($scope, $element, $attrs, mouseCapture) is not using explicit annotation and cannot be invoked in strict mode

错误的角度生成url为：

https://docs.angularjs.org/error/$injector/strictdi？p0=函数（$scope，%20$元素，%20$attrs，%20mouseCapture

以下是服务

angular.module('mouseCapture', [])
//
// Service used to acquire 'mouse capture' then receive dragging events while the mouse is captured.
//
.factory('mouseCapture', function ($rootScope) {
    //
    // Element that the mouse capture applies to, defaults to 'document' 
    // unless the 'mouse-capture' directive is used.
    //
    var $element = document; 
    //
    // Set when mouse capture is acquired to an object that contains 
    // handlers for 'mousemove' and 'mouseup' events.
    //
    var mouseCaptureConfig = null;
    //
    // Handler for mousemove events while the mouse is 'captured'.
    //
    var mouseMove = function (evt) {
        if (mouseCaptureConfig && mouseCaptureConfig.mouseMove) {
            mouseCaptureConfig.mouseMove(evt);
            $rootScope.$digest();
        }
    };
    //
    // Handler for mouseup event while the mouse is 'captured'.
    //
    var mouseUp = function (evt) {
        if (mouseCaptureConfig && mouseCaptureConfig.mouseUp) {
            mouseCaptureConfig.mouseUp(evt);
            $rootScope.$digest();
        }
    };
    return {
        // 
        // Register an element to use as the mouse capture element instead of 
        // the default which is the document.
        //
        registerElement: function(element) {
            $element = element;
        },
        //
        // Acquire the 'mouse capture'.
        // After acquiring the mouse capture mousemove and mouseup events will be 
        // forwarded to callbacks in 'config'.
        //
        acquire: function (evt, config) {
            //
            // Release any prior mouse capture.
            //
            this.release();
            mouseCaptureConfig = config;
            // 
            // In response to the mousedown event register handlers for mousemove and mouseup 
            // during 'mouse capture'.
            //
            $element.mousemove(mouseMove);
            $element.mouseup(mouseUp);
        },
        //
        // Release the 'mouse capture'.
        //
        release: function () {
            if (mouseCaptureConfig) {
                if (mouseCaptureConfig.released) {
                    //
                    // Let the client know that their 'mouse capture' has been released.
                    //
                    mouseCaptureConfig.released();
                }
                mouseCaptureConfig = null;
            }
            $element.unbind("mousemove", mouseMove);
            $element.unbind("mouseup", mouseUp);
        },
    };
})
//
// Directive that marks the mouse capture element.
//
.directive('mouseCapture', function () {
  return {
    restrict: 'A',
    controller: function($scope, $element, $attrs, mouseCapture) {
        // 
        // Register the directives element as the mouse capture element.
        //
        mouseCapture.registerElement($element);
    },
  };
})
;

如何修复此错误

从文档中可以看出，您需要在字符串数组中声明所有依赖项注入。

还有其他方法，但通常我会这样做：

controller: ['$scope', '$element', '$attrs', 'mouseCapture',
  function($scope, $element, $attrs, mouseCapture) {
    ...
  }
]

我们这样做的原因之一是，当我们试图缩小这个js文件时，变量名会减少到一到两个字符，DI需要确切的名称来查找服务。通过在字符串数组中声明DI，angular可以将服务与其缩小的变量名相匹配。因此，字符串数组和函数参数在数量和顺序上需要精确匹配。

更新：

如果你正在遵循John Papa的Angular风格指南，你应该这样做：

controller: MouseCaptureController,
...
MouseCaptureController.$inject = ['$scope', '$element', '$attrs', 'mouseCapture'];
function MouseCaptureController($scope, $element, $attrs, mouseCapture) {
  ...
}

代码显示：

$injector：strictdi

依赖项注入出错在该错误的文档中：

每当服务尝试使用隐式注释时，严格模式都会抛出错误

您应该尝试切换到：

.factory('mouseCapture', ['$rootScope', function ($rootScope) {...}]);

语法，无论何时处于严格模式。

只需将'ngInject'添加到构造函数的第一行即可。

添加"ngInject'"是我的答案。实际上，我正在使用angularjs的typescript，并在构造函数完成任务之前添加/@ngInject/。

奇怪的尝试捕获给我造成了这个错误。

try {
    console.log("test");
} catch {
    console.log("err");
}

必须更改为

try {
    console.log("test");
} catch (err) {
    console.log("err");
}
相关文章：