2016-11-21 23 views
16

Tôi mới sử dụng JS Angular và tôi đang sử dụng phiên bản 1.6 của nó.Bộ điều khiển góc không được đăng ký lỗi

Tôi có apptest.js kịch bản này:

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

Và đây data/data.json dữ liệu của tôi:

[ 
    { 
    "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":"[email protected]" 
    }, 
    "categories":[ 
     "Vehicles", 
     "Parts and Accessories" 
    ], 
    "image": "http://www.louisianasportsman.com/classifieds/pics/p1358549934434943.jpg", 
    "views":213 
    } 
] 

Bây giờ đây là trang html của tôi, nơi tôi đã chỉ định những ng-app và ng-điều khiển:

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

Tôi vẫn nhận được lỗi sau đây mới đối với tôi:

angular.js:14239 Error: [$controller:ctrlreg] The controller with the name 'productController' is not registered. http://errors.angularjs.org/1.6.0-rc.0/ $controller/ctrlreg?p0=productController

Mọi trợ giúp đều được đánh giá cao.

+5

IIFE của bạn không được gọi, bạn nên thay đổi nó để '(function () {...})(); 'bạn phải thêm'() 'vào hàm đóng để nó sẽ được gọi và sau đó bộ điều khiển của bạn sẽ được đăng ký. –

+0

Bạn có thể giải thích lý do tại sao chúng tôi sử dụng IIFE ngay bây giờ trong góc?Xin vui lòng, nó là mờ với tôi. – droidnation

+1

Đó là một vấn đề javascript thực sự, IIFE có nghĩa là biểu thức hàm được gọi ngay lập tức, mục đích của nó chủ yếu là để tách biệt mã từ đối tượng gốc 'cửa sổ', khi bạn sử dụng tất cả các khai báo IIFE bị giới hạn trong phạm vi đó. Đó là cơ bản tất cả về cách ly phạm vi. Kiểm tra bài viết wikipedia này về nó https://en.wikipedia.org/wiki/Immediately-invoked_function_expression –

Trả lời

12

Đó là vì số Immediately Invoked Function Expression của bạn. bạn phải thay đổi nó như dưới đây:

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

ngữ cảnh là myApp không ứng dụng –

+0

có tôi nghĩ rằng bạn là sai chính tả 'App' thay vì' myApp' trong tham số phải không? –

+2

không, tôi đã không đánh vần nhầm nó. Tôi đang chuyển 'myApp' làm đối số để tôi có thể sử dụng bất kỳ bí danh biến nào bên trong hàm tự gọi. – ranakrunal9

5

tôi nhập khẩu các tập tin, trong index.html và vấn đề của tôi được giải quyết,

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

Vui lòng không đăng câu trả lời giống hệt nhau cho các câu hỏi khác nhau -> ** http: //stackoverflow.com/questions/41460755/error-controllerctrlreg-a-controller-with-this-name-is-not-registered** Bên cạnh đó, toàn bộ điểm bằng cách sử dụng trình tạo và grunt là loại bỏ các tập lệnh chèn thủ công thành index.html – davidkonrad

+0

nhờ hướng dẫn ... tôi đã sử dụng lệnh gulp để loại bỏ chèn thủ công –

2

Trong trường hợp của tôi, nó đã mất tích tài liệu tham khảo trong trang chỉ mục cũng như điều khiển của tôi tên là startupController (thông báo trường hợp thấp hơn s) và tôi đã cố gắng để đăng ký nó với StartupController (trường hợp trên)

+0

Đó là lỗi ngu ngốc của tôi! cảm ơn bạn! – tinyCoder

-1

Lỗi này xảy ra khi dịch vụ $ controller() được gọi với một chuỗi không khớp với bất kỳ đăng ký nào bộ điều khiển. Dịch vụ điều khiển có thể được gọi trực tiếp, hoặc gián tiếp, ví dụ thông qua lệnh ngController, hoặc bên trong định nghĩa thành phần/chỉ thị/tuyến đường (khi sử dụng một chuỗi cho thuộc tính bộ điều khiển). module của bên thứ ba cũng có thể nhanh chóng điều khiển với các dịch vụ $ controller()

Nguyên nhân cho lỗi này có thể là:

1- tài liệu tham khảo của bạn với bộ điều khiển có một lỗi đánh máy. Ví dụ, trong thuộc tính directive ngController, trong thuộc tính controller của định nghĩa thành phần, hoặc trong lệnh gọi tới $ controller().

2- Bạn chưa đăng ký bộ điều khiển (không phải qua Module.controller hay $ controllerProvider.register()

3- Bạn có một lỗi đánh máy trong tên điều khiển đăng ký

ref:.. https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController

1

trong trường hợp của tôi, với lỗi này đó, tôi thất bại trong việc xác định các module ứng dụng trong các chỉ thị ng ứng dụng như thế này:

<div class="row" ng-app> 

Trong một số trường hợp tôi đã nhìn thấy nơi ng ứng dụng là do bản thân nhưng tôi đã buộc phải xác định các ứng dụng như:

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

Các vấn đề liên quan