63

バックグラウンド

最も基本的な「初心者」の AngularJS の質問があります。私の無知を許してください。コードを介してモデルを更新するにはどうすればよいですか? どこかで何度も答えられていると思いますが、見つけられませんでした。http://egghead.ioでいくつかの素晴らしいビデオを見て、チュートリアルをすばやく読みましたが、それでも非常に基本的なものが欠けているように感じます。

ここで関連する例を 1 つ見つけました( $route.reload()) が、以下の例でそれを使用する方法を理解しているかどうかはわかりません

セットアップはこちら

controllers.js

function PersonListCtrl($scope, $http) {
  $http.get('/persons').success(function(data) {
    $scope.persons = data;
  });
}

index.html

...
<div>
    <ul ng-controller="PersonListCtrl">
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
</div>
...

これはすべて驚くほどうまく機能し、ページがリロードされるたびに、期待どおりに人々のリストが表示されます

質問

  1. 更新ボタンを実装したいとしましょう。モデルにプログラムで再読み込みするように指示するにはどうすればよいでしょうか?
  2. モデルにアクセスするにはどうすればよいですか? Angular がコントローラーのインスタンスを魔法のようにインスタンス化しているようですが、どうすればそれを手に入れることができますか?
  3. EDITは #1 と同じ 3 番目の質問を追加しましたが、純粋に JavaScript を介してどのように行うことができますか?

何か基本的なことが欠けていると確信していますが、それを理解しようと 1 時間費やした後、質問に値すると思います。重複している場合はお知らせください。リンクを閉じます。

4

2 に答える 2

72

あなたは一人でそこまでの道のりです。リフレッシュを実装するには、スコープの関数に既にあるものをラップするだけです。

function PersonListCtrl($scope, $http) {
  $scope.loadData = function () {
     $http.get('/persons').success(function(data) {
       $scope.persons = data;
     });
  };

  //initial load
  $scope.loadData();
}

次に、マークアップで

<div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="loadData()">Refresh</button>
</div>

「モデルへのアクセス」に関しては、コントローラーで $scope.persons 配列にアクセスするだけです。

たとえば、コントローラーで（puedoコードのみ）：

$scope.addPerson = function() {
     $scope.persons.push({ name: 'Test Monkey' });
};

次に、それをビューまたはやりたいことで使用できます。

于 2013-02-04T19:22:54.787 に答える
2

プログラムでサーバーからモデル データをリロード/更新する方法を紹介する前に? Data Bindingの概念について説明する必要があります。これは、開発方法に真に革命をもたらす非常に強力な概念です。したがって、AngularjS の仕組みを理解するには、このリンクまたはこの2 番目のリンクからこの概念について読む必要があるかもしれません。

次に、サーバーからモデルを更新する方法を説明するサンプル例を示します。

HTML コード:

<div ng-controller="PersonListCtrl">
    <ul>
        <li ng-repeat="person in persons">
            Name: {{person.name}}, Age {{person.age}}
        </li>
    </ul>
   <button ng-click="updateData()">Refresh Data</button>
</div>

したがって、コントローラーの名前はPersonListCtrlで、モデルの名前はpersonsです。コントローラー js に移動して、モデルのpersonupdateData()を更新および更新する必要があるときに呼び出される、という名前の関数を開発します。

Javascript コード:

app.controller('adsController', function($log,$scope,...){

.....

$scope.updateData = function(){
$http.get('/persons').success(function(data) {
       $scope.persons = data;// Update Model-- Line X
     });
}

});

次に、それがどのように機能するかを説明します。ユーザーがボタンRefresh Dataをクリックすると、サーバーは関数updateData()を呼び出し、この関数内で関数によって Web サービスを呼び出し、$http.get()ws から結果が得られたら、モデルに影響を与えます (行 X)。モデルの結果に影響を与えるサイコロ、このリストのビューは新しいデータで変更されます。

于 2015-05-31T16:52:42.897 に答える