comment réparer Angular ne pas utiliser d'annotation explicite et ne peut pas être invoqué en mode strict

J'utilise le mode strict et Angular 1.4.7, j'obtiens l'erreur suivante:

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

L'url générée angulaire pour l'erreur est:

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

Et ce qui suit est le 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);

    },
  };
})
;

Comment puis-je corriger cette erreur

29
demandé sur Mr Mixin 2015-10-28 08:55:05

2 réponses

De la documentation il semble que vous ayez besoin de déclarer toutes les injections de dépendance dans le tableau de chaînes.

Il y a d'autres façons mais normalement je le ferais comme ceci:

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

L'une des raisons pour lesquelles nous faisons cela est que lorsque nous essayons de réduire ce fichier js, les noms de variables seraient réduits à un ou 2 caractères, et DI a besoin du nom exact pour trouver les services. En déclarant DI dans un tableau de chaînes, angular peut faire correspondre les services avec leur nom de variable minifié. Pour ce raison, le tableau de chaînes et les arguments de la fonction ont besoin D'une correspondance exacte en nombre et en ordre.


mise à Jour:

Si vous suivez Le Guide de style angulaire de John Papa , vous devriez le faire comme ceci:

controller: MouseCaptureController,
...

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

function MouseCaptureController($scope, $element, $attrs, mouseCapture) {
  ...
}
42
répondu Icycool 2016-05-18 03:48:20

Le code dit:

$injecteur: strictdi

Il y a une erreur avec l'injection de dépendance Dans la documentation de cette erreur:

Le mode Strict génère une erreur chaque fois qu'un service Tente d'utiliser des annotations implicites

Vous devriez essayer de passer à:

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

Syntaxe, chaque fois que dans le mode strict.

8
répondu lebobbi 2015-10-28 06:05:19