AngularJSモジュールをHTMLに組み込む

最近私はAngularJSを学ぼうとしていましたが、私が作成した角度モジュールを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 }; 
 
});

バインディングは、私のHTML

...彼らはモジュールと相互作用しない場合は機能しているように見えます

私はすべてのことが正しいと確信しています、そして、私が見つけた例とほぼ同じですが、製品モジュールを参照するバインディングを表示していないようです。

出典

2016-09-14 Alex McCalman

あなたが直面している問題はありますか？あなたのコントローラは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

私はそれを前に試しました。もう一度試してみましたが、まだ動作しませんでした。もう一度、私は例でその仕事を感謝しましたが、私はまた、それが実際にはそうしてはいけないということをドキュメンテーションで読みました。 –

これはうまくいくはずです...コンソールにはどのような価値がありますか？それぞれのステップでコンソールを追加してください。もしあなたが手がかりを得られなかったとしても、他の問題があるかもしれません。 –

billygが私の問題を解決しました。 –

AngularJSモジュールをHTMLに組み込む

答えて

関連する問題