在HTML中加入AngularJS模块

Including AngularJS modules in HTML

本文关键字：AngularJS 模块 HTML      更新时间：2023-09-26

我最近一直在尝试学习AngularJS，但我似乎无法让我的HTML看到我所做的angular模块。如果绑定不与模块交互，它们似乎可以工作…

我的HTML: 

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

我的JS: 

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

我很确定我所做的一切都是正确的，它与我发现的示例基本相同，但它似乎没有显示任何引用product模块的绑定。

检查拼写:

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

应:

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

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

相关文章：