AngularJS 오류: '인수 'FirstCtrl'이(가) 함수가 아니며 정의되지 않았습니다.
여기서도 같은 질문이 몇 번 나왔다는 것을 알고 해결하려고 했지만 소용이 없었습니다.
에그헤드 비디오에 대한 튜토리얼을 따라하고 있습니다.
그러나 컨트롤러와 컨트롤러 간의 데이터 공유 섹션이 표시되었을 때 제대로 작동하지 않습니다.
Chrome에서 실행하면 콘솔에 다음 오류가 나타납니다.
'인수 'FirstCtrl'이 함수가 아니므로 정의되지 않았습니다.'
뭐가 문제인지 정말 모르겠어요.코드는 튜토리얼과 동일합니다.
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Tutorials: Controllers</title>
<link rel="stylesheet" href="mystyle.css">
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1> {{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me in a foundation component
</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.discloss.main.discloss.
function FirstCtrl($scope){
$scope.data = { message: "Hello" };
}
이름이 2개입니다.ng-apphtml 지시사항을 참조해 주세요.
네 div에 있는 걸 놓쳐라.
갱신하다
다른 방법을 시도해 봅시다.
js 파일에 모듈을 정의하여ng-app지시할 수 있습니다.그 후 컨트롤러를 단순한 함수가 아닌 ng 컴포넌트와 같이 정의합니다.
<div ng-app="myAppName">
<!-- or what's the root node of your angular app -->
및 js 부분:
angular.module('myAppName', [])
.controller('FirstCtrl', function($scope) {
$scope.data = {message: 'Hello'};
});
여기 온라인 데모가 있습니다.http://jsfiddle.net/FssbL/1/
같은 에러 메세지가 표시되고 있습니다만, 제 경우는 컨트롤러의 JS 파일(first-ctrl.js 등)이 index.html에 기재되어 있지 않습니다.
이 튜토리얼을 하고 @gion_13 답변을 팔로우했습니다.아직 작동하지 않았다.인덱스의 ng-app 이름을 js 파일의 이름과 동일하게 하여 해결했습니다.정확히 똑같아요, 심지어 인용문까지요.그래서:
<div ng-app="myapp">
<div ng-controller="FirstCtrl">
및 js:
angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
$scope.data= {message:"hello"};
});
ng-app은 동일해야 하는데 ng-controller는 동일하지 않다니 이상하다.
이름을 지정해야 합니다. 앱에 네임스페이스를 지정합니다.ng-app 충분하지 않습니다.
대신:
<html ng-app>
...
대신 다음과 같은 것이 필요합니다.
<html ng-app="app">
...
그러면 이렇게.
var app = angular.module("app", []).controller("ActionsController", function($scope){});
또 다른 멋진 것:실수로 모듈을 재정의하고 있습니다.오늘 아침에 너무 열심히 복사/붙여넣어서 모듈 정의를 가지고 있어서 컨트롤러 정의를 오버로드했습니다.
// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);
그리고 제 정의로는 이렇게 언급하기로 되어 있었습니다.
// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
.controller('SomeCtrl', function() { /* ... */ });
대신 제가 한 일은,
// Do not try this at home!
// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
.controller('SomeCtrl', function() { /* ... */ });
// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
.controller('SomeOtherCtrl', function() { /* ... */ });
콜의 추가 괄호를 확인합니다.angular.module.
ng-app="를 에서 제거합니다.
<div ng-app="">
간단하게 만들 수 있습니다.
<div>
저도 같은 문제에 직면했어요.하지만 문제는 ng-app이 의존하는 모듈 목록에 모듈을 나열하는 것을 잊었다는 것입니다.
저는 이 문제에 직면했고 다음과 같은 방법으로 해결되었습니다.
먼저 다음 위치에서 ng-app 제거:
<html ng-app>myApp에 ng-app 이름 추가:
<div ng-app="myApp">함수 전에 다음 코드 줄을 추가합니다.
angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
스크립트의 최종 모양:
angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
function FirstCtrl($scope){
$scope.data = {message: "Hello"};
}
내 경우, 이 메시지는 메인 모듈에서 잊어버린 의존성 주입에서 비롯됩니다.
각진 앱 코드를 두 번 이상 추가하도록 잘못 구성한 경우 이 문제가 발생할 수 있습니다.제 경우, 이것은 index.js에 있으며 컨트롤러 선언 전후에 js 파일 디렉토리의 일부로 추가되고 있습니다(globed in gulp).index.js를 최소화할 수 없는 제외를 추가하고 두 번째 삽입을 하자 앱이 작동하기 시작했습니다.위의 솔루션 중 하나라도 고객의 문제를 해결할 수 없는 경우 또 하나의 힌트를 제공합니다.
첫 번째 - 모듈 이름이 정의되지 않은 경우 JS에서 모듈에 액세스하여 컨트롤러를 연결할 수 없습니다.
각도 모듈에 모듈 이름을 지정해야 합니다.정의 모듈 사용에는 1. angular.module("first Module"), [] 2. angular.module("first Module")도 차이가 있습니다.
1 - 첫 번째는 두 번째 인수에 종속성이 추가되지 않은 새로운 모듈 "first Module"을 선언하는 것입니다.2 - 다른 곳에서 초기화되어 있는 "first Module"을 사용하여 초기화된 모듈을 가져오고 이를 수정합니다.
이 문제에 직면했지만 컨트롤러의 이름을 변경하여 이 문제를 해결할 수 있었습니다.한번 사용해 보세요.
ctrlSub.execSummaryDocuments = function(){};
함수 내부의 코드 구문에 잘못된 것이 있으면 이 오류가 발생할 수 있습니다.기능을 올바르게 점검합니다.내 경우 값을 사용하여 Json 필드를 할당하려고 할 때 등호 = 대신 colon :을 사용하여 할당하려고 할 때 발생하였습니다.
두 개의 javascript 파일에 동일한 이름의 컨트롤러가 정의되어 있었습니다.이 각도를 자극하면 네임스페이스 경합을 나타내는 더 명확한 오류 메시지가 나타납니다.
이 튜토리얼은 잘 모르겠지만 grunt/gulp 최소화 프로세스에 파일을 포함시키는 것을 잊어버렸을 때도 같은 문제가 있었습니다.
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
}
}
}
});
도움이 됐으면 좋겠다.
네 편지 케이스도 조심해라.나는 이 벌레를 쫓느라 많은 시간을 보냈다.
<section id="forgotpwd" ng-controller="ForgotPwdController">
컨트롤러 이름을 붙이는 동안
angular
.module('app')
.controller('ForgotpwdController', ForgotpwdController);
모두 일관된 이름을 붙여야 합니다.이 경우 대소문자가 p인 ForgetpwdController 입니다.
언급URL : https://stackoverflow.com/questions/19408011/angularjs-error-argument-firstctrl-is-not-a-function-got-undefined
'programing' 카테고리의 다른 글
| JSX에서 부울 값을 렌더링할 수 없습니까? (0) | 2023.04.05 |
|---|---|
| AngularJS/Angular-ui-bootstrap datePicker에서 사용되는 언어 변경 (0) | 2023.04.05 |
| 기존 create-react-app 앱에 TypeScript 추가 (0) | 2023.04.05 |
| 웹 사이트의 특정 부분만 iframe에 넣는 방법은 무엇입니까? (0) | 2023.04.05 |
| angularjs가 있는 뷰에서 ng-if 값을 사용하여 null을 확인하는 방법 (0) | 2023.04.05 |