Question

我最近一直在努力学习AngularJS，但我似乎无法让我的HTML看到我制作的角度模块。如果他们不与模块交互，绑定似乎有效......

我的HTML：

＆＃13;

<!DOCTYPE html>
<html ng-app="productsModule">
<head>
	<meta charset="UTF-8">
	
	<script src="../lib/dependencies/angular.min.js"></script>
	<script src="../lib/dependencies/angular-resource.min.js"></script>
	
	<script src="../scripts/products.module.js"></script>
	
	<title>ProductsTestPage</title>
</head>
<body>
	<div ng-contoller="ProductListJSController as productList">
		<h1>Product Test Page</h1>
		
		<span>Total number of products: {{ productList.total() }}</span>
		
		<span>{{ productList.test }}</span>
	
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Price (£)</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="product in productList.products">
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
			</tbody>
		</table>
	
		<p> 1 + 2 = {{1+2}} </p>
	</div>
	
</body>
</html>

＆＃13;

我的JS：

＆＃13;

angular.module('productsModule', [])
	.controller('ProductListJSController', function(){
		//var productList = this;
		
	   this.test = 'test';
		
	   this.products = [
		  {id: 53, name:'gnome 1', price: 50},
		  {id: 54, name:'gnome 2', price: 70},
		  {id: 55, name:'gnome 3', price: 90}];
	   this.total = function(){
		  var count = 0;
		  angular.forEach(this.products, function(){
			 count += 1;
		  });
		  return count;
	   };
});

＆＃13;

我很确定我做的一切都是正确的，而且它与我发现的例子大致相同，但它似乎并没有显示任何参考产品模块的绑定。

Answer 1

试试$scope： -

angular.module('productsModule', [])
  .controller('ProductListJSController', function($scope){
    //var productList = this;

     $scope.test = 'test';

     $scope.products = [
          {id: 53, name:'gnome 1', price: 50},
          {id: 54, name:'gnome 2', price: 70},
          {id: 55, name:'gnome 3', price: 90}];
     $scope.total = function(){
          var count = 0;
          angular.forEach(this.products, function(data){
            count += 1;
          });
          return count;
     };
});

<强> HTML

<div ng-contoller="ProductListJSController">

<span>{{ test }}</span>

Answer 2

检查拼写：

<div ng-contoller="ProductListJSController as productList">

应该是：

<div ng-controller="ProductListJSController as productList">

在HTML中包含AngularJS模块

2 个答案: