programing

컨트롤러를 글로벌하게 정의하면서 컨트롤러가 함수가 아니라 정의되지 않았습니다.

testmans 2023. 3. 21. 21:47
반응형

컨트롤러를 글로벌하게 정의하면서 컨트롤러가 함수가 아니라 정의되지 않았습니다.

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>

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

이것은 획기적인 변화이지만 를 사용하여 글로벌을 사용하기 위해 끌 수 있습니다.

예:-

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

Angular source의 코멘트는 다음과 같습니다.

  • 합니다.$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요소에 예: - element (예예예예예예예예예예예예:-)html도 마찬가지입니다을 사용하다 - 파일: - ng-app="myApp"

  • 문제가 발생하지 않는 경우는, 스크립트에 적절한 파일이 포함되어 있는 것을 확인해 주세요.

  • 을 다른 때문에 엔티티가예: 「」 「Delement」 「Deagate」 「Deagate」 「Deagate 2」 ） 」 。§:angular.module('app',[]).controller(.. 다른 angular.module('app',[]).service(..되어 있는 는 모듈 (컨트롤러)를 시킬 수 .app모듈의 두 번째 재작성으로 클리어합니다.

이 문제는 컨트롤러 정의 파일을 클로저로 감았기 때문에 발생합니다.

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

하지만 저는 그 정의 코드를 실행하기 위해 실제로 폐쇄를 호출하는 것을 잊었습니다. 그리고 실제로 Javascript에 제 컨트롤러가 존재함을 알립니다.즉, 위 사항은 다음과 같아야 합니다.

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

마지막에 ()을 적어 둡니다.

저는 Angular 초보자인데, Angular root 요소에 앱 이름을 넣지 않는 기본적인 실수를 했습니다.그래서 코드 변경은

<html data-ng-app>

로.

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

@PSL은 위의 답변에서 이미 이것을 다루었습니다.

는, 이 에러의 에 발생했습니다.angular.module('myApp', []) ★★★★★★★★★★★★★★★★★」angular.module('myApp').

그러면 'myApp' 모듈이 생성되고 'myApp'이라는 이름의 기존 모듈을 덮어씁니다.

angular.module('myApp', [])

기존 모듈 'myApp'을 검색합니다.

angular.module('myApp')

저는 위의 첫 번째 콜을 사용하여 모듈을 다른 파일로 덮어쓰고 있었습니다.이 콜은 예상대로 취득하지 않고 다른 모듈을 만들었습니다.

자세한 내용은 이쪽:https://docs.angularjs.org/guide/module

각도 1.3.3으로 마이그레이션하면 앱이 오버라이드될 때 서로 다른 파일에 여러 개의 컨트롤러가 있고 처음 선언된 컨테이너가 손실된 경우입니다.

그게 좋은 방법인지는 모르겠지만, 다른 방법에도 도움이 될 수 있을 것 같아요.

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

때 이 .myApp:

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

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

「 」Controller1OP를 사용하다

루트 페이지에 포함된 중요한 스크립트를 놓치는 것만으로 동일한 오류가 발생할 수 있습니다.

예:

페이지: index.display

   np-app="saleApp"

실종된

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

어떤 컨트롤러와 뷰에 서비스를 제공할 것인지 루트에 지시되었을 때:

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

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

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

app.module

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.displaces를 표시합니다.

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

다른 모든 것이 실패하여 Gulp 같은 것을 사용하고 있는 경우...재방송해 주세요!

나는 30분 동안 모든 것을 확인하느라 4배 시간을 허비했는데, 단지 바지를 빠르게 걷어차기만 하면 되었다.

루트(고확률)를 사용하고 있으며 Configuration에 의존관계로 선언되지 않은 모듈의 컨트롤러에 대한 참조가 있는 경우 초기화가 실패할 수 있습니다.

예를 들어 앱에 ngRoute를 설정했다고 가정합니다.

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

루트를 선언하는 블록에서는 주의해 주세요.

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

secondModule있는 이할 수 있습니다.ngRoute'는 'ngRoute'를 사용합니다.나도 이런 문제가 있었단 거 알아

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

이 오류는 list.find() function; IE11에서 인식되지 않는 목록의 'find' 메서드에서 구문 오류가 발생하므로 IE11과 chrome에서 모두 동작하는 Filter 메서드로 대체해야 합니다.https://github.com/flrs/visavail/issues/19 를 참조해 주세요.

이 오류는 IE11의 목록 찾기 메서드에서 구문 오류가 발생하므로 권장되는 대로 필터 메서드로 find 메서드를 대체하십시오.https://github.com/flrs/visavail/issues/19

위의 컨트롤러 미정의 오류가 해결되었습니다.

AngularJS 1.4.3을 사용한 이전 튜토리얼을 따르는 동안 동일한 오류가 발생했습니다.지금까지 가장 간단한 해결책은 angular.js 소스를 편집하는 것입니다.

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

로.

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

현재 튜토리얼을 따르면 권장되지 않는 글로벌 기능은 컨트롤러로 작동합니다.

언급URL : https://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally

반응형

'programing' 카테고리의 다른 글

Spring JPA를 사용하여 엔티티의 선택된 속성만 가져오려면 어떻게 해야 합니까?  (0) 2023.03.21
PL/SQL ORA-01422: 정확한 가져오기가 요청된 행 수보다 많은 행을 반환합니다.  (0) 2023.03.21
Oracle 데이터베이스에서 장시간 실행 중인 쿼리를 확인하는 방법  (0) 2023.03.21
어떤 걸로 할까요?org.json의 JSONObject VS javax.json의 JsonObject  (0) 2023.03.21
Response setState가 업데이트되지 않음  (0) 2023.03.21

'programing'의 다른글

  • 현재글컨트롤러를 글로벌하게 정의하면서 컨트롤러가 함수가 아니라 정의되지 않았습니다.

관련글

댓글

티스토리툴바