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.
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ý. –
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
Đó 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 –