bestsource

명시적 주석을 사용하지 않는 각도를 수정하는 방법 및 엄격한 모드에서 호출할 수 없습니다.

bestsource 2023. 3. 15. 19:48
반응형

명시적 주석을 사용하지 않는 각도를 수정하는 방법 및 엄격한 모드에서 호출할 수 없습니다.

strict 모드를 사용하고 있습니다.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=function($scope,%20$element,%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 파일을 최소화하려고 하면 변수 이름이 1~2자로 줄어들고 DI는 서비스를 찾기 위해 정확한 이름이 필요하기 때문입니다.string 배열에서 DI를 선언함으로써 angular는 서비스를 최소화된 변수 이름과 일치시킬 수 있습니다.따라서 string array 및 funct 인수에는 수와 순서로 EXCRUCT MATCHING이 필요합니다.


업데이트:

John Papa의 Angular 스타일 가이드를 따를 경우 다음과 같이 해야 합니다.

controller: MouseCaptureController,
...

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

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

코드는 다음과 같습니다.

$140:440di

이 오류에 대한 설명서에서 종속성 주입에 오류가 발생했습니다.

서비스가 암묵적인 주석을 사용하려고 할 때마다 엄밀한 모드가 오류를 발생시킨다.

다음 항목으로 전환해 보십시오.

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

구문(완전모드일 경우)을 지정합니다.

추가만 하면 됩니다.'ngInject'컨스트럭터의 첫 번째 줄에 연결합니다.

'ngInjection'을 추가하는 게 제 답이었습니다.사실 저는 angularjs와 함께 typescript를 사용하고 있으며, 컨스트럭터가 트릭을 하기 직전에 /@ngInject/를 추가하고 있습니다.

이상하게 try catch가 이 에러의 원인이 되었습니다.

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

로 바뀌어야 했다

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

언급URL : https://stackoverflow.com/questions/33383854/how-to-fix-angular-not-using-explicit-annotation-and-cannot-be-invoked-in-strict

반응형