39

$resource を使用して AngularJS を理解しようとしていますが、私が目にするほとんどの例では、$resource を使用して何かの新しいインスタンスを実際に作成する方法 (またはセットアップ全体がどのように見えるべきか) を説明していません。このコードの一番下にコードを掲載しました。

「/entry/api」に投稿すると新しいエントリが作成される、次の設定があります。エントリ オブジェクト自体には、名前、説明、および ID の 3 つのプロパティがあります。

$scope.save(); を呼び出すと思いました。次の 2 つのことを行います。

  1. 入力フィールドを POST データとしてマップする
  2. $resource で定義された URL (この場合は「/entry/api」) に POST リクエストを送信します。

私が見たいくつかの例では、データをリソースに手動でマッピングしています。

var entry = new Entry();
entry.name = $name; // defined in entryController
entry.description = $scope.description; // <-- defined in entryController
entry.$save()

これらのフィールドはhtmlで定義されているため、これは必要ではないと思いました。このソリューションにより、次の結果が得られます。

  1. バックエンドでモデルを定義する
  2. フロントエンドでのモデルの定義 ( entryController div)
  3. entryController の値をdivJS バージョンのモデルに追加し、最後に保存します。

AngularJS の仕組みなのかもしれませんが、html の入力フィールドは自動的にマッピングされると思いました。

それ以外の場合は、(バックエンド) モデルのプロパティを追加または削除する場合に、コード内に更新する場所が少なくとも 3 つあります。

$resource新しいオブジェクトを保存するために AngularJS をどのように使用するのですか?

angular.module('entryManager', ['ngResource']);

function pollController($scope, $resource) {
    $scope.polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        this.save();
    }
}


<html ng-app="entryManager">
... <-- include angularjs, resource etc.

<div ng-controller="entryController">
    <input type='text' ng-model="name"><br/>
    <textarea ng-model="description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>
4

2 に答える 2

46

最初に注意する必要があると思いますがscope != model、スコープにはモデルを含めることができます。

スコープにいくつかのオブジェクトがあり、それを保存する必要があります。

したがって、次のようなものがあります。

HTML:

<div ng-controller="entryController">
    <input type='text' ng-model="poll.name"><br/>
    <textarea ng-model="poll.description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>

JavaScript:

function pollController($scope, $resource) {
    var polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        polls.save($scope.poll);
    }
}

注 1:ポーリング オブジェクトを初期化していなくても、入力を開始すると、AngularJS は自動的に新しいオブジェクトを作成します。

注2：フォームをラップする方が良いです（ ng-controllerまたはwrapで属性をdivにngForm追加することにより）。この場合、保存する前にフォームの有効性を確認できます。ng-form="someformname"<form name='...'>..</form>$scope.someformname.$valid

良い例は、AngularJS Web サイトのメイン ページの「バックエンドの配線」セクションにあります (ところで、私のお気に入りです)。

于 2013-04-22T18:58:56.170 に答える
4

モデル オブジェクト自体に対して save メソッドを使用しないでください。モデル クラスの save メソッドを使用します。たとえば、-

//inject User resource here
$scope.user = new User();

$scope.user.name = "etc";

User.save($scope.user,function(response){

});

以前$scope.user.$save(function(response){})は $scope.user オブジェクトをクリアしていました

于 2015-11-30T05:33:22.457 に答える