2

Angular の Web サイトには、次の簡単な例があります。

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data;
  });

  $scope.orderProp = 'age';
}

ただし、これよりも複雑なことを実行したいのですが、多くの Angular のドキュメントを読んだ後でも、その方法がわかりません。ajax リクエストの結果に基づいて、いくつかの DOM 操作を実行する必要があります。このコードを構造化するにはどうすればよいですか? Angular の Web サイトには、具体的に次のように書かれています。

コントローラーを使用しないでください: あらゆる種類の DOM 操作 — コントローラーにはビジネス ロジックのみを含める必要があります。

わかりました...では、ajaxの戻りデータに基づいてどこでDOM操作を処理すればよいでしょうか? 彼らのドキュメントがこれを言っていることに気づきました：

独自の手動 DOM 操作を実行する必要がある場合は、プレゼンテーション ロジックをディレクティブにカプセル化します。

しかし、これをすべて適切に接着する方法がわかりません。これをどのようにまとめて、AJAX リクエストが再度行われ、「モデル」が変更された場合でも、対応するロジックが実行されて DOM 操作が実行されるようにするにはどうすればよいでしょうか?

基本的に、コントローラーではない場合、AJAX リクエストに基づいてどこで DOM 操作を実行しますか?

4

1 に答える 1

0

$http または $resource で AJAX リクエストを実行している場合は、この AJAX リクエストの結果をコントローラーの $scope に挿入します。

ディレクティブを使用すると、モデルが変更されたときに $watch できます...はい、ディレクティブを使用してそれを行うのが正しい方法です!

たとえば、HTML 部分:

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="script.js"></script>

  </head>

  <body ng-controller="MyController">
    <h1>Usage Directive for model data change</h1>
    <div>
      <input directive type="text" ng-model="example"/>
    </div>
  </body>

</html>

スクリプトは、単純なコントローラーとディレクティブで構成されています。

angular.module('App', []).controller('MyController', function($scope){

    // In real prod app you'll use the $http API to get the data from the server
    $scope.example = "Example data";
  });

angular.module('App').directive('directive', function(){
  return{
    restrict: 'A',
    link: function(scope, element, attrs){
      scope.$watch(attrs.ngModel, function(newValue){
        console.log(newValue);
      })
    }
  }
});

このコードを実行し、ブラウザー コンソール (F12) を開いて入力値を変更すると、スコープのディレクティブと $watch 関数で新しい値が取得されることがわかります。

于 2013-09-17T08:04:53.097 に答える