在HTML中包含AngularJS模塊

我最近一直在試圖學習AngularJS，但我似乎無法讓我的HTML看到我製作的角度模塊。綁定看起來，如果他們不與模塊交互工作...在HTML中包含AngularJS模塊

我的HTML：

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

我的JS：

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

我很確定我做的都對，它和我發現的例子大體相同，但它似乎沒有顯示任何涉及產品模塊的綁定。

來源

2016-09-14 Alex McCalman

ok你面對的是什麼問題？你的控制器不適用於DOM？或者你得到什麼錯誤？ –

我沒有得到任何錯誤。該頁面將顯示，並且所有靜態HTML顯示正常。即使是{{1 + 2}}表達式也適用。但是，任何引用JS文件中實際內容的東西（如{{productList.test}}）都不會出現。 –

'{{...}}'如果您的表達式正常工作，則意味着您的控制器正在使用DOM。現在只需在控制檯中檢查'productList.test'對象。是否有任何條目或不... –

檢查拼寫：

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

應該是：

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

來源

2016-09-14 13:48:07 billyg4585

嗯，現在我覺得很傻......我想責怪在我的IDE中缺乏代碼建議，但這主要是我在這一點上是一個白癡......乾杯，發現這一點。 –

沒問題，我們都犯錯誤。請務必將其標記爲正確，以免人們嘗試解決問題。乾杯! – billyg4585

嘗試$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>

來源

2016-09-14 13:32:51

我曾嘗試過。只是再試一次，它仍然無法正常工作。再次，我已經在示例中看到了這個工作，但是我也在文檔中看過，它不應該以這種方式完成，這就是爲什麼我嘗試了另一種方式。 –

它應該工作..你在控制檯中獲得什麼價值？在每個步驟中添加控制檯..或者即使你沒有得到任何線索，那麼可能是你有其他問題 –

比利格解決了我的問題：拼寫錯誤毀了一切。 –

在HTML中包含AngularJS模塊

回答

相關問題