Mr Mixin Mr Mixin - 6 months ago 19
Javascript Question

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

I am using strict mode and

Angular 1.4.7
, I get the following error:

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:

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

Answer

From the documentation it 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.


Update:

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

controller: MouseCaptureController,
...

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

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