각도 컨트롤러가 등록되지 않음 오류
Angular JS는 처음이고 1.6 버전을 사용하고 있습니다.
게 요.apptest.js★★★★★★★★★★★★★★★★★★:
var myApp = angular.module("myApp", []);
(function(){
"use strict";
myApp.controller("productController", function($scope, $http)
{
$http.get('data/data.json').then(function(prd)
{
$scope.prd = prd.data;
});
});
});
그리고 여기서 나의data/data.json 삭제:
[
{
"id":"1",
"title":"20 Foot Equipment Trailer",
"description":"2013 rainbow trailer 20 feet x 82 inch deck area, two 5,000 lb axels, electric brakes, two pull out ramps, break away box, spare tire.",
"price":6000,
"posted":"2015-10-24",
"contact": {
"name":"John Doe",
"phone":"(555) 555-5555",
"email":"johndoe@gmail.com"
},
"categories":[
"Vehicles",
"Parts and Accessories"
],
"image": "http://www.louisianasportsman.com/classifieds/pics/p1358549934434943.jpg",
"views":213
}
]
다음은 ng-app과 ng-controller를 지정한 html 페이지입니다.
<body ng-app="myApp" ng-controller="productController">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Add <span class="sr-only">(current)</span></a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-sm-4" ng-repeat="product in prd">
<div class="panel panel-primary">
<div class="panel-heading">{{product.title}}</div>
<div class="panel-body">
<img ng-src="{{product.image}}">
{{product.price | currency}}
{{product.description}}
</div>
<div class="panel-footer">a</div>
</div>
</div>
</div>
<script src="angular/angular.js"></script>
<script src="scripts/appTest.js"></script>
</body>
다음과 같은 에러가 발생하고 있습니다만, 이것은 새로운 것입니다.
angular.js:14239 오류: [$controller:ctrlreg] 이름이 'productController'인 컨트롤러가 등록되어 있지 않습니다.http://errors.angularjs.org/1.6.0-rc.0/$controller/ctrlreg?p0=productController
어떤 도움이라도 감사합니다.
네 덕분이야Immediately Invoked Function Expression 요. 이렇게.
var myApp = angular.module("myApp", []);
(function(app){
"use strict";
app.controller("productController", function($scope, $http){
$http.get('data/data.json').then(function(prd){
$scope.prd = prd.data;
});
});
})(myApp);
Import에 있는 만 하면 .index.html ,
<script src=".../productController.js"></script>
경우에는 인덱스 도 제경,, 、 덱ller was 、 was was was was was was was in 。startupControllers 에.StartupController ss)
제 경우, 이와 같은 오류로 인해 다음과 같은 ng-app 지침에서 앱 모듈을 식별하지 못했습니다.
<div class="row" ng-app>
어떤 상황에서는 ng-app이 어디에 있는지 직접 확인했지만 다음과 같이 앱을 식별하지 않을 수 없었습니다.
<div class="row" ng-app="myApp">
나의 경우, 나는 예에서 코드 조각을 복사했을 뿐인데, 그것은 다른 코드를 포함하고 있었다.ng-app ★★★★★★★★★★★★★★★★★」ng-controller 중 <DIV>이 "Cisco Unity"였기 때문에 혼란스러웠습니다.Ctrl
이것을 읽고 있는 경우는, Web 브라우저 콘솔에서 찾을 수 없는 컨트롤러의 이름을 확인해 주세요.는 ★★★★★★★★★★★★★★★★★.
Ctrl
그래서 제 구조에는 다음과 같은 이름의 컨트롤러가 하나 더 있다는 것을 깨달았습니다.
부정한 코드
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="SampleCtrl">
<h1>{{message}}</h1>
<!-- SEE THIS TABLE HAS A CONTROLLER WITH A VERY UNDEFINED NAME, SO IT MAKES IT DIFFICULT TO TRACK -->
<table ng-app="app" ng-controller="Ctrl" >
<td>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true">
</ui-cropper>
</div>
</td>
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
</table>
</body>
<script>
var myApp = angular.module("sampleApp", []);
myApp.controller("SampleCtrl", function ($scope) {
$scope.message = "It Works!";
});
</script>솔루션
처음에 원하지 않았던 컨트롤러와 앱 정의를 제거한 후, 그것은 매우 효과적이었습니다.
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="SampleCtrl">
<h1>{{message}}</h1>
<!-- SEE THE NOW DOES NOT HAVE A CONTROLLER, THE CONTROLLER WILL BE MY DEFAULT APP CONTROLLER SampleCtrl -->
<table>
<td>
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true">
</ui-cropper>
</div>
</td>
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
</table>
</body>
<script>
var myApp = angular.module("sampleApp", []);
myApp.controller("SampleCtrl", function ($scope) {
$scope.message = "It Works!";
});
</script>저도 같은 문제가 있어요.나는 메인 js에 js 코드를 넣음으로써 문제를 해결했다.나의 html은 나의 원래 html과 js가 따르고 있는 메인 html의 레이어이다.
<div style="background: #f5f5f5;" ng-app='myapp' ng-controller="cIdentityCtrl as ctrl">
<form class="padding-md" name="staffForm" ng-submit="submit()">
<div class="row popup" style="padding-bottom: 10px;" ng-repeat="item in sfList">
<label style="width: 130px;text-align: right;"> {{item.branchName}}:</label>
<input type="text" style="width: 175px;display: inline-block;" class="form-control" ng-model="item.PERCENT"
placeholder="股份比例">%
</div>
<div class="clearfix"></div>
<div class="height50"></div>
<div class="text-center iframe-layer-btn">
<button type="submit" class="btn btn-success" ng-disabled="staffForm.$invalid">保存</button>
<button type="button" class="btn btn-default" ng-click="close()">关闭</button>
</div>
</form>
</div>
<script>
var myapp= angular.module('myapp',[]);
(function(myapp){
"use strict";
myapp.service('layerService', layerService)
.factory('instance', instance);
myapp.controller('cIdentityCtrl', function($scope, instance, layerService) {
console.log(instance.storeList)
$scope.sfList = angular.copy(instance.storeList);
$scope.submit = function(){
for(var i=0;i<$scope.sfList.length;i++){
if($scope.sfList[i].PERCENT!=null && $scope.sfList[i].PERCENT!=''){
if(!/^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/.test($scope.sfList[i].PERCENT)){
massage.error($scope.sfList[i].branchName+'门店设置有误:[0,100]保留二位小数');
return false;
}
}
}
instance.fnsf($scope.sfList);
layerService.close(instance.layero1);
}
$scope.close=function(){
layerService.close(instance.layero1);
}
});
})(myapp);
</script>
이 html과 js는 ng-include로 열었지만 컨트롤러를 찾을 수 없었습니다.그리고 부모 html의 js파일에 js를 넣었더니 정상적으로 동작했습니다.
저도 같은 문제가 있었는데 그 이유를...ng-app 지침의 앱 모듈은 다음과 같이 본문 태그 수준에서 정의/사용되었습니다.
<body ng-app="intervalAngularExample">
또한 productionController.js의 $controller 정의를 헤더 레벨의 html 파일로 Import했습니다.이것은 확실히 동작하지 않습니다.
<head> <script src=".../productController.js"></script> </head> <body ng-app="intervalAngularExample"> </body>
Import는 바디 태그 안에 있어야 합니다.
이 오류는 $controller() 서비스가 등록된 컨트롤러 중 하나와 일치하지 않는 문자열로 호출되었을 때 발생합니다.컨트롤러 서비스는 예를 들어 ngController 디렉티브를 통해 직접 또는 간접적으로 호출되거나 컴포넌트/ 디렉티브/루트 정의 내에서 호출됩니다(컨트롤러 속성에 문자열을 사용하는 경우).서드파티 모듈은 $controller() 서비스로 컨트롤러를 인스턴스화할 수도 있습니다.
이 에러의 원인은 다음과 같습니다.
1- 컨트롤러에 대한 참조에 오타가 있습니다.예를 들어 ngController 디렉티브 속성, 컴포넌트 정의의 컨트롤러 속성, $controller() 호출 등입니다.
2- 컨트롤러를 등록하지 않았습니다(Module.controller 또는 $controllerProvider.register()를 통해서도).
3- 등록된 컨트롤러 이름에 오타가 있습니다.
참조: https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController
언급URL : https://stackoverflow.com/questions/40720733/angular-controller-is-not-registered-error
'programing' 카테고리의 다른 글
| 헤더("Content-type: text/xml") 대신; (0) | 2023.03.16 |
|---|---|
| 봄 MVC 3.2 티멜리프 아약스 프래그먼트 (0) | 2023.03.16 |
| 다음 포스트 요청을 어떻게 처리할 것인가? (0) | 2023.03.16 |
| 경고:알 수 없는 DOM 속성 클래스입니다.className을 말하는 건가요? (0) | 2023.03.16 |
| 모든 사용자 테이블을 삭제하는 방법 (0) | 2023.03.16 |