come risolvere angolare non usare l'annotazione esplicita e non può essere invocata in modalità rigorosa

Question

Sto usando modalità rigorosa e Angular 1.4.7, ottengo il seguente errore:

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

l'URL generato angolare per l'errore è:

https://docs.angularjs.org/error/ $ iniettore/strictdi? p0 = function ($ portata,% 20 $ elemento,% 20 $ attrs,% 20mouseCapture

E il seguente è il servizio

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

    }, 
    }; 
}) 
; 

Come posso correggere questo errore

Answer 1

Dal documentation sembra che sia necessario dichiarare tutte le iniezioni di dipendenza nell'array di stringhe.

Non ci sono altri modi, ma di solito lo farei in questo modo:

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

Una delle ragioni che facciamo questo è perché quando proviamo a minify questo file JS, i nomi delle variabili sarebbero ridotti ad uno o 2 caratteri e DI ha bisogno del nome esatto per trovare i servizi. Dichiarando DI in un array di stringhe, angular può abbinare i servizi con il loro nome di variabile minified. Per questo motivo, l'array di stringhe e gli argomenti della funzione necessitano di ESATTA CORRISPONDENZA in numero e ordine.

---

Aggiornamento:

Se si sta seguendo John Papa's Angular style guide, si dovrebbe fare in questo modo:

controller: MouseCaptureController, 
... 

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

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

Answer 2

Il codice dice:

$injector:strictdi

C'è un errore con l'iniezione di dipendenza Nella documentazione di questo errore:

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

Si dovrebbe prova a passare a:

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

sintassi, ogni volta in modalità rigorosa.