컨트롤러가 함수가 아니고 정의되지 않았으며 컨트롤러를 전역 적으로 정의하는 동안

123

angularjs를 사용하여 샘플 애플리케이션을 작성 중입니다. 크롬 브라우저에서 아래에 언급 된 오류가 발생했습니다.

오류는

오류 : [ng : areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

다음과 같이 렌더링되는

인수 'ContactController'는 함수가 아니므로 정의되지 않았습니다.

암호

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>
javascript  angularjs  angularjs-directive  angularjs-scope 
— 요크
소스

답변:

172

Angular 1.3 이상에서는 더 이상 전역 범위에서 전역 컨트롤러 선언을 사용할 수 없습니다 (명시적인 등록없이). module.controller구문을 사용하여 컨트롤러를 등록해야 합니다.

예:-

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

또는

function ContactController($scope) {
    $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

    $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

주요 변경 사항이지만 을 사용하여 전역을 사용하도록 끌 수 있습니다allowGlobals .

예:-

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

다음은 Angular 소스의 주석입니다.

  • 주어진 이름의 컨트롤러가 다음을 통해 등록되었는지 확인하십시오. $controllerProvider
  • 현재 범위에서 문자열을 평가하면 생성자가 반환되는지 확인
  • $ controllerProvider # allowGlobals 인 window[constructor]경우 전역 window개체를 확인 합니다 (권장되지 않음).
 .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

몇 가지 추가 검사 :-

  • ng-app각도 루트 요소 (예 :-)의 지시문 에도 appname을 넣어야합니다 html. 예 :-ng-app = "myApp"

  • 모든 것이 정상이고 여전히 문제가 발생하면 스크립트에 올바른 파일이 포함되어 있는지 확인하십시오.

  • 동일한 모듈에 이전에 정의 된 개체의 결과는, 밖으로 지워 예 수있는 당신은 다른 장소에서 두 번 같은 모듈을 정의하지 않은 angular.module('app',[]).controller(..다른 장소에서 다시 angular.module('app',[]).service(..(물론 포함 모두 스크립트)는에 이전에 등록 된 컨트롤러를 일으킬 수 있습니다 모듈 app의 두 번째 재생산으로 제거 할 모듈.

— PSL
소스
제안 된대로 이것을 확인하는 방법은 무엇입니까? 주어진 이름을 가진 컨트롤러가 $ controllerProvider를 통해 등록되었는지 확인
— geckob
app.register.controller ( 'TheController', TheController); 나를 위해 트릭을했다.
— morph85
33

컨트롤러 정의 파일을 클로저로 래핑했기 때문에이 문제가 발생했습니다.

(function() {
   ...stuff...
});

그러나 나는 실제로 그 클로저를 호출하여 그 정의 코드를 실행하고 실제로 Javascript에 내 컨트롤러가 존재한다고 말하는 것을 잊었다. 즉, 위의 내용은 다음과 같아야합니다.

(function() {
   ...stuff...
})();

끝에있는 ()에 유의하십시오.

— 불량배
소스
1
+1 흥미롭게도 Visual Studio가 때때로 자동으로 호출을 제거하는 것 같습니다. 이 코드가 포함 된 기존 js 파일을 복사했습니다. 원본에는 호출이 있었지만 복사 된 파일에는 그렇지 않았습니다.
— papergodzilla
16

저는 Angular의 초보자이고 각 루트 요소에 앱 이름을 포함하지 않는 기본적인 실수를 저질렀습니다. 따라서 코드를

<html data-ng-app>

에 

<html data-ng-app="myApp">

나를 위해 일했습니다. @PSL은 위의 답변에서 이미 이것을 다루었습니다.

— 프라 카쉬 티 와리
소스
8

angular.module('myApp', [])과 의 차이점을 이해하지 못했기 때문에이 오류가 발생했습니다 angular.module('myApp').

이렇게 하면 'myApp'모듈 이 생성 되고 'myApp'이라는 기존 모듈을 덮어 씁니다.

angular.module('myApp', [])

이 검색 기존 모듈 '을 myApp을'

angular.module('myApp')

예상대로 검색하는 대신 다른 모듈을 만든 위의 첫 번째 호출을 사용하여 다른 파일에서 내 모듈을 덮어 썼습니다.

자세한 내용은 https://docs.angularjs.org/guide/module에서 확인하세요.

— 제이크 스튜어트
소스
1
제 경우에는 모듈을 추가하고 컨트롤러를 추가했지만 앱의 모듈 목록에 모듈을 추가하는 것을 잊었습니다. `angular.module ( "응용 프로그램", [HEREYOURMODULE] ...`
— 토마스
3

angular 1.3.3으로 마이그레이션하고 앱이 재정의되고 처음 선언 된 컨테이너를 잃었을 때 다른 파일에 여러 컨트롤러가있는 경우를 발견했습니다.

좋은 방법인지 모르겠지만 다른 방법에 도움이 될 수 있습니다.

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
— Franzi
소스
2

실수로 다시 선언했을 때이 문제가 발생했습니다 myApp.

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

재 선언 후 Controller1작업을 중지하고 OP 오류를 발생시킵니다.

— 다니엘 플리 펀스
소스
2

루트 페이지에 중요한 스크립트 포함을 누락하여 동일한 오류가 발생할 수 있다는 점을 제외하면 정말 좋은 조언입니다 .

예:

페이지 : index.html 

   np-app="saleApp"

잃어버린

<script src="./ordersController.js"></script>

어떤 컨트롤러와 뷰를 제공 할 것인지 경로가 알려지면 :

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

따라서 정의되지 않은 컨트롤러 문제는 컨트롤러를 참조하지 않는 우연한 실수로 발생할 수 있습니다!

— 톰 스티 켈
소스
0

이 오류는 모듈이 많은 대형 프로젝트가있는 경우에도 발생할 수 있습니다. 각도 파일에 사용 된 앱 (모듈)이 템플릿에서 사용하는 것과 동일한 지 확인하십시오 (이 예제에서는 " thisApp ").

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

index.html

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>
— 패트릭
소스
0

다른 모든 것이 실패하고 Gulp 또는 이와 유사한 것을 사용하고 있다면 ... 다시 실행하십시오!

바지를 빠르게 차는 것이 필요한 모든 것을 확인하는 데 30 분을 4 배로 낭비했습니다.

— sigmapi13
소스
0

경로 (높은 확률)를 사용하고 구성에 종속성으로 선언되지 않은 모듈의 컨트롤러에 대한 참조가있는 경우 초기화도 실패 할 수 있습니다.

예를 들어 앱에 대해 ngRoute를 구성했다고 가정합니다.

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

경로를 선언하는 블록에서 조심하세요. 

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

secondModule'ngRoute'후 종속성으로 선언 하면 문제가 해결됩니다. 이 문제가 있다는 것을 알고 있습니다.

— H.Rabiee
소스
0

내 코드와 호환되지 않는 이전 버전의 angular를 사용했기 때문에이 오류가 발생했습니다.

— 딘 샤
소스
0

이 오류는 제 경우에는 list.find () fuction에서 구문 오류보다 먼저 발생했습니다. IE11에서 인식하지 못하는리스트의 'find'메소드는 IE11과 크롬 모두에서 작동하는 Filter 메소드로 대체해야합니다. 참조 https://github.com/flrs/visavail/issues/19를

— HydTechie
소스
0

필자의 경우이 오류는 IE11의 목록 찾기 방법에서 구문 오류가 발생했습니다. 그래서 https://github.com/flrs/visavail/issues/19 에서 제안한 필터 방법으로 찾기 방법을 대체했습니다.

그런 다음 위의 컨트롤러가 정의되지 않음 오류가 해결되었습니다.

— HydTechie
소스
-3

AngularJS 1.4.3으로 (충분히 오래되지 않은) 오래된 자습서를 따르는 동안 동일한 오류가 발생했습니다. 지금까지 가장 간단한 해결책은 다음에서 angular.js 소스 를 편집하는 것 입니다.

function $ControllerProvider() {
  var controllers = {},
      globals = false;

에

function $ControllerProvider() {
  var controllers = {},
      globals = true;

튜토리얼을 그대로 따르고 사용되지 않는 전역 함수는 컨트롤러로 작동합니다.

— MKaama
소스
이것은 나쁜 습관입니다. PSL의 답변에서 언급했듯이 다음과 같이 할 수 있습니다.angular.module('app') .config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]);
— gm2008
-1. 이것은 또한 (a) 업그레이드하자마자 이것을 덮어 쓰는 것을 보장하는 좋은 방법입니다. "1.4.3을 1.4.4로 업그레이드하면 내 응용 프로그램이 손상되었습니다!"라는 불필요하고 잘못된 보고서가 생성됩니다. 및 / 또는 (b) "힘들 기 때문에"앱을 업그레이드하지 않습니다.
— Phillip Copley
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.