Javascript 如何修复不使用显式注释且无法在严格模式下调用的 Angular

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

提问by Mr Mixin

I am using strict mode and Angular 1.4.7, I get the following error:

我正在使用严格模式，并且Angular 1.4.7出现以下错误：

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

The angular generated url for the error is:

错误的角度生成的 url 是：

https://docs.angularjs.org/error/$injector/strictdi?p0=function($scope,%20$element,%20$attrs,%20mouseCapture

https://docs.angularjs.org/error/$injector/strictdi?p0=function($scope,%20$element,%20$attrs,%20mouseCapture

And the following is the service

以下是服务

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);

    },
  };
})
;

How do i fix this error

我如何解决这个错误

回答by Icycool

From the documentationit looks like you need to declare all dependency injections in string array.

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

There are other ways but normally I would do it like this:

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

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

One of the reason we do this is because when we try to minify this js file, variable names would be reduced to one or 2 characters, and DI needs the exact name to find the services. By declaring DI in a string array, angular can match services with their minified variable name. For this reason, the string array and the function arguments need EXACT MATCHING in number and order.

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

---

---

Update:

更新：

If you are following John Papa's Angular style guide, you should do it like this:

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

controller: MouseCaptureController,
...

MouseCaptureController.$inject = ['$scope', '$element', '$attrs', 'mouseCapture'];

function MouseCaptureController($scope, $element, $attrs, mouseCapture) {
  ...
}

回答by lebobbi

The code says:

代码说：

$injector:strictdi

$injector:strictdi

There is an error with the dependency injection In the documentation for this error:

依赖注入有错误 在这个错误的文档中：

Strict mode throws an error whenever a service tries to use implicit annotations

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

You should try to switching to:

您应该尝试切换到：

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

syntax, whenever in strict mode.

语法，无论何时在严格模式下。

回答by pez

Just add 'ngInject'to the first line of your constructor.

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

回答by Robert

adding 'ngInject' was the answer the worked for me. Actually I am using typescript with angularjs, and adding /@ngInject/ right before the constructor did the trick.

添加“ngInject”是对我有用的答案。实际上，我正在使用带有 angularjs 的打字稿，并在构造函数完成此操作之前添加 / @ngInject/ 。