3

私はangularjsで遊んでいて、次のHTMLを持っています:-

   <div ng-app="App">
      <div ng-controller="AppCtrl">
         <products></products>
      </div>
   </div>

私のjsは次のようになります:-

var app = angular.module('App', []);

app.controller("AppCtrl", function($scope, $http) {
   $http.get('/api/products')
      .then(function(res) {
         $scope.products = res.data;
   });
});

app.directive("products", function () {
   return {
      restrict: "E",
      template: "<h1>Products</h1><ul><li ng-repeat='product in products'>{{product.Name}} - <em>{{product.Category}}</em></li></ul>",
   };
});

これは非常にうまく機能しますが、テンプレートが結果をレンダリングする前にコントローラーがデータをロードしたことをディレクティブがどのように認識しているかはわかりません。だから私の質問は： -

$http.getこのシナリオでa を使用するための推奨される方法は何ですか (説明はいいでしょう) またはそうでない場合は、推奨される方法は何ですか?

4

1 に答える 1

2

の上手な使い方だと思います$http.get。結局のところ、これは ajax リクエストを実行するための単なるツールです。

あなたの質問は、あなたのディレクティブがさまざまなシナリオで不思議なことに壊れるという恐れから生じているようですが、それは理解できます. 重要なのは、データ バインディングが Angular の秘密兵器であることを理解することです。

それについて考える 1 つの方法として、Angular はすべてをコンパイルし、イベント / ダイジェスト ループにスローします。したがって、依存関係を検出し、変数の変更を監視し、それらの変数が変更されたときに依存するメソッド (製品ディレクティブなど) を呼び出すことができます。

Angular ガイドは、理解を深めるための概念図を提供する素晴らしい仕事をしています。http: //docs.angularjs.org/guide/concepts

于 2013-04-21T19:18:46.613 に答える