在HTML中包含AngularJS模塊

Question

我最近一直在嘗試學習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; }; });

我很確定自己做對了所有事情，並且幾乎與我發現的示例相同，但是似乎沒有顯示任何引用產品模塊的綁定。

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 個解決方案

解決方案1
0 2016-09-14 13:32:51

解決方案2
0 已采納 2016-09-14 13:48:07

在HTML中包含AngularJS模塊

問題描述

2 個解決方案

解決方案1 0 2016-09-14 13:32:51

解決方案2 0 已采納 2016-09-14 13:48:07

解決方案1
0 2016-09-14 13:32:51

解決方案2
0 已采納 2016-09-14 13:48:07