오류 : 인수가 함수가 아니므로 정의되지 않았습니다.

120

Scala Play에서 AngularJS를 사용하면이 오류가 발생합니다.

오류 : 'MainCtrl'인수는 함수가 아니므로 정의되지 않았습니다.

요일로 구성된 테이블을 만들려고합니다.

내 코드를 살펴보세요. 컨트롤러 이름을 확인했지만 올바른 것 같습니다. 참고 :이 SO 답변 에서 사용되는 코드

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js 

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());
angularjs  playframework 
— 케빈 메러디스
소스
15
HTML을 사용한 한 곳에서 ng-app당신은 그것을 변경할 수 있습니다ng-app=myApp
— Chandermani
같은 오류 @Chandermani있어
— 케빈 메러디스
코드에서 클로저 (IIFE)를 제거해 보셨습니까? 이 문제가 발생했을 때 자바 스크립트에 PHP 오류가 있었기 때문입니다.
— Kevin Beal
1
다음 체크리스트에서 문제를 찾을 수 있습니다. stackoverflow.com/a/26797874/930170
— Sergei Panfilov 2014
당신이 MainCtrl.controller.js 추가 여부 확인은 BundleConfig.cs 파일에 추가된다
— 에드 모하메드을

답변:

107

[]모듈 이름 ([myApp])에서 제거

angular.module('myApp', [])

그리고 ng-app="myApp"html에 추가 하면 작동합니다.

— Chandermani
소스
1
작동하도록하기 위해 내가해야 할 일은 두 번째 제안 (예 : set ng-app = "myApp")뿐이었습니다. []를 제거하면 다른 오류가 발생합니다.
— Jason
15
두 번째 매개 변수가 []있으면 새 모듈을 만들고 있음을 나타냅니다. 두 번째 매개 변수를 제거하면 기존 모듈을 검색하고 있음을 나타냅니다. 따라서 확인할 수있는 한 가지 가능성 angular.module은 두 번째 매개 변수를 포함하여 두 번 호출하는 경우 입니다. 그렇다면 나중에 발생하는 경우 두 번째 항목을 덮어 쓰고 해당 지점까지의 컨트롤러 정의를 숨 깁니다.
— Carl G
26
그가 제거하라고 말할 때 그는 []OP가 [myApp]대신에 있는 첫 번째 매개 변수를 참조하고 myApp있습니다. 그는 두 번째 매개 변수에 대해 말하는 것이 아닙니다.
— Kevin Beal
1
경로를 사용하는 경우 컨트롤러의 이름을 확인하십시오. 경로 정의의 컨트롤러 이름은 대소 문자를 구분합니다.
— Latin Warrior
78

먼저. controller정의하는 컨트롤러 이름과 동일한 경로 정의 가 올바른지 확인하십시오.

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

이 예에서 컨트롤러 이름이 다르면 오류가 발생하지만이 예는 정확합니다.

두 번째로 자바 스크립트 파일을 가져 왔는지 확인합니다.

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

— Pleerock
소스
30
내 경험상 "두 번째"가 항상 문제입니다. 나는 종종 내 컨트롤러를 가져 오는 것을 잊어 버립니다index.html
— msanford 2014
제 경우에도 두 번째 파일이었습니다. JS 파일을 가져 오는 것을 잊었습니다.
— Saurabh Misra
26

동일한 오류 메시지가 표시되었습니다 (제 경우 : "인수 'languageSelectorCtrl'은 함수가 아니므로 정의되지 않았습니다").

Angular seed의 코드와 지루한 비교를 한 후 이전에 app.js에서 컨트롤러 모듈에 대한 참조를 제거했음을 알게되었습니다. ( https://github.com/angular/angular-seed/blob/master/app/js/app.js에서 찾아보십시오. )

그래서 나는 이것을 가지고 있었다 :

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

이것은 실패했습니다.

그리고 누락 된 참조를 추가했을 때 :

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

오류 메시지가 사라지고 Angular가 컨트롤러를 다시 시작할 수 있습니다.

— Bertrand
소스
같은 문제가 있었는데, 내 문제는 컨트롤러를 앱 모듈에 추가하는 것을 잊었다는 것입니다. 왜 자동으로 발생하지 않습니까 ??? 어쨌든 감사합니다!
— TheZuck
16

때때로이 오류는 html에 지정된 두 가지 ng-app 지시문 의 결과입니다 . 실수로 내 경우에는 내가 지정했던 ng-app내에서 html태그와 ng-app="myApp"에 body이런 태그 :

<html ng-app>
  <body ng-app="myApp"></body>
</html>
— Gaurav
소스
1
myApp 모듈에 주입을 추가하지 않았을 때 발생했습니다.
— Ghandhikus
감사합니다! 이것은 내 문제를 해결했습니다.
— bradden_gross dec.
6

이것은 심각하게 4 시간이 걸렸지 만 (SO에 대한 끝없는 검색 포함) 마침내 발견했습니다. 실수로 (의도하지 않게) 어딘가에 공백을 추가했습니다.

당신은 그것을 발견 할 수 있습니까?

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

그래서 ... 4 시간 후에 나는 그것이 다음과 같아야한다는 것을 알았습니다.

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

육안으로는 거의 볼 수 없습니다.

이는 개정 제어 (git 또는 기타) 및 단위 / 회귀 테스트의 중요성을 강조합니다.

— 사자 별자리
소스
1
내 대답은 여분의 공간이 아니지만 내 수정으로 이어졌습니다. Controller대신 가지고 있었고 controller그게 전부였습니다.
— Grandizer 2015-10-26
그리고 내 파일 이름을 options-moda.controller.js로 지정했지만 options-modal.controller.js DOH를 찾고있었습니다!
— theFish
내 것은 BundleConfig에 .js를 추가하는 것을 잊었 기 때문입니다. 간단하지만 실망 스럽습니다.
— Ege Bayrak
4

나는 같은 문제가 발생했으며 내 경우에는이 문제의 결과로 발생했습니다.

컨트롤러를 별도의 모듈 ( 'myApp.controllers'라고 함)에 정의하고 다음과 같이 기본 앱 모듈 ( 'myApp'이라고 함)에 삽입했습니다.

angular.module('myApp', ['myApp.controllers'])

동료가 별도의 파일에 다른 컨트롤러 모듈을 푸시했지만이 오류를 일으킨 내 이름과 똑같은 이름 (예 : 'myApp.controllers')을 사용했습니다. Angular가 컨트롤러 모듈 사이에서 혼란스러워서 생각합니다. 그러나 오류 메시지는 무엇이 잘못되었는지 발견하는 데별로 도움이되지 않았습니다.

— 릴라 엘리
소스
1
모듈에서 두 번째 매개 변수를 제거하여 수정해야합니다. 두 번째 매개 변수없이 angular.module ( 'myApp')을 사용하여 기존 모듈을 가져 오려면. 즉 angular.module ( '을 myApp') 콘트롤 (...).
— Santhosh
3

제 경우에는 (개요 페이지와 "추가"페이지가 있음) 아래와 같은 라우팅 설정을 통해이 정보를 얻었습니다. 삽입 할 수없는 AddCtrl에 대한 메시지를 제공했습니다.

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

when('/'경로 때문에 모든 경로가 개요로 이동했고 컨트롤러는 / add 경로 페이지 렌더링에서 일치하지 못했습니다. add.html 템플릿을 보았지만 컨트롤러를 찾을 수 없었기 때문에 이것은 혼란 스러웠습니다.

케이스가이 문제를 해결했을 때 '/'경로를 제거했습니다.

— EeKay
소스
이 오류도 수신하고 TFS 빌드가 실패했기 때문에 머리카락이 찢어졌습니다. '/'경로를 주석 처리하면 나에게도 해결되었습니다. 이제 그 이유를 알아보십시오!
— Phillip Copley
3

서브 모듈에 있다면 메인 앱에서 모듈을 선언하는 것을 잊지 마십시오. 즉 :

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

mainApp에서 subModule1을 선언하지 않으면 "[ng : areq] 인수"MyController "가 함수가 아니므로 정의되지 않았습니다.

— Syjust
소스
2

Уmed의 두 번째 요점은 내 함정 이었지만 기록을 위해 어딘가에서 누군가를 돕고있을 수도 있습니다.

나는 같은 문제가 있었고 미치기 직전에 컨트롤러 스크립트를 포함하는 것을 잊었다는 것을 발견했습니다.

내 앱이 ASP.Net MVC를 기반으로하기 때문에 App_Start / BundleConfig.cs 에 다음 코드 조각을 삽입하여 제정신을 유지하기로 결정했습니다.

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

및 Layout.cshtml

<head>
...
   @Scripts.Render("~/app")
...
</head>

이제 다시는 파일을 수동으로 포함하는 것에 대해 생각할 필요가 없습니다. 돌이켜 보면 프로젝트를 설정할 때이 작업을 수행 했어야합니다.

— Xceno
소스
1

주 index.html에서 사용한 LoginController에 정상적인 오류가 발생했습니다. 두 가지 해결 방법을 찾았습니다.

  1. $ controllerProvider.allowGlobals () 설정, Angular change-list 에서 해당 주석을 찾았습니다. "이 옵션은 이전 앱을 마이그레이션하는 데 유용 할 수 있지만 새 앱에서는 사용하지 마십시오!" . Angular에 대한 원래 의견

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

  2. 컨트롤러 등록의 잘못된 구성자

전에

LoginController.$inject = ['$rootScope', '$scope', '$location'];

지금

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

'app'은 app.js에서 왔습니다.

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);
— 드미트리 알 가진
소스
1

큰 실수로 같은 오류가 발생했습니다.

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

알 겠어요? 첫 번째 $ 범위 주변에서 ''를 잊었습니다. 물론 올바른 구문은 다음과 같습니다.

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

내가 즉시 보지 못한 첫 번째 오류는 " $ scope is not defined ", 다음 " Error : [ng : areq] Argument 'TreeEditStepControlsCtrl'is not a function, got undefined "입니다.

— Elo
소스
0

자산을 ""로 묶는 것처럼 간단 할 수 있으며 내부에 ''로 따옴표가 필요한 것은 무엇입니까?

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

된다

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

파싱에 문제가 발생할 수 있습니다.

— 제이 톰
소스
0

이 문제를 해결하기 위해 Angular 경로 선언에서 컨트롤러 이름을 잘못 입력했음을 발견해야했습니다.

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })
— MadPhysicist
소스
0

제 경우에는 다음과 같은 간단한 오타였습니다 index.html.

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

그랬어 야 했어

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

s컨트롤러 이름에 추가없이 .

— 소용돌이
소스
0

여기에서 Chrome을 사용하는 브라우저의 캐시 인 것으로 밝혀졌습니다. 검사 (요소)에서 "캐시 비활성화"를 확인하여 문제를 해결했습니다.

— 웨이 후이 구오
소스
0

"오류 : 인수 ''는 함수가 아니므로 정의되지 않았습니다"에 대한 답을 찾으려고 할 때 Google에서 팝업이 표시되기 때문입니다.

동일한 모듈을 두 번 만들려고 할 수 있습니다.

angular.module은 AngularJS 모듈을 생성, 등록 및 검색하기위한 글로벌 위치입니다.

하나의 인수를 전달하면 기존 angular.Module을 검색하는 반면 둘 이상의 인수를 전달하면 새 angular.Module이 생성됩니다.

출처 : https://docs.angularjs.org/api/ng/function/angular.module#overview

예:

angular.module('myApp', []) 종속성을 주입하지 않고 모듈을 만드는 데 사용됩니다.

angular.module('myApp') (인수없이)는 기존 모듈을 가져 오는 데 사용됩니다.

— MCollard
소스
0

오류가 실제 원인 이 많다는 것을 암시하는 많은 작업 솔루션 이있는 것으로 보입니다 .

제 경우에는 다음에서 컨트롤러를 선언하지 않았습니다 app/index.html.

<scipt src="src/controllers/controller-name.controller.js"></script>

오류가 사라졌습니다.

— 타이 콘웨이
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.