Question

我是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
  }
]

现在这是我的html页面，我指定了ng-app和ng-controller：

<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]控制器用 name'productController'未注册。 http://errors.angularjs.org/1.6.0-rc.0/ $控制器/ ctrlreg？P0 = ProductController的

感谢任何帮助。

Answer 1

因为你的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);

Answer 2

我在index.html导入文件，问题解决了，

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

Answer 3

在我的情况下，它在索引页面中缺少引用，我的控制器名称是startupController（注意小写s），我试图用StartupController注册它（大写s）

Answer 4

在我的情况下，由于同样的错误，我无法在ng-app指令中识别app模块，如下所示：

<div class="row" ng-app>

在某些情况下，我已经看到了ng-app本身的位置，但我被迫识别应用程序：

<div class="row" ng-app="myApp">

Answer 5

我有同样的问题。我通过将js代码放在主js中解决了这个问题。我的html是主html上的一层我的原始html和js如下：

<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打开，但找不到控制器。然后将js放在父html的js文件中，效果很好。

Answer 6

我遇到了同样的问题，并找到了原因... 像这样在body-tag级别定义/使用ng-app指令中的app模块

<body ng-app="intervalAngularExample">

并将productionController.js中的$ controller定义导入标头级别的html文件中，当然这不起作用。

<head>
<script src=".../productController.js"></script>
</head>
<body ng-app="intervalAngularExample">
</body>

然后导入应该在body标签内。

Answer 7

就我而言，我只是复制了一段代码from an example，它在其中的ng-app中包含了另一个ng-controller和<DIV>。该消息最初令人困惑，因为所需的控制器名为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>

Answer 8

当使用与任何已注册控制器不匹配的字符串调用$ controller（）服务时，会发生此错误。控制器服务可能已直接或间接调用，例如通过ngController指令，或在组件/指令/路由定义内（当使用控制器属性的字符串时）。第三方模块也可以使用$ controller（）服务实例化控制器

此错误的原因可能是：

1-您对控制器的引用有拼写错误。例如，在ngController指令属性中，在组件定义的控制器属性中，或在对$ controller（）的调用中。

2-您尚未注册控制器（既不通过Module.controller也不通过$ controllerProvider.register（）。

3-注册的控制器名称中有拼写错误。

参考：https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController

角度控制器未注册错误

8 个答案: