web-dev-qa-db-ja.com

angular $ resourceにカスタム関数を追加する

私はangularのようなリソースを持っています

app.factory('User', function ($resource) {
    return $resource(
        '/api/user/:listCtrl:id/:docCtrl/', {
            id: '@id',
            listCtrl: '@listCtrl',
            docCtrl: '@docCtrl'
        }, {
            update: {
                method: 'PUT'
            },
            current: {
                method: 'GET',
                params: {
                    listCtrl: 'current'
                }
            },
            nearby: {
                method: 'GET',
                params: {
                    docCtrl: 'nearby'
                },
                isArray: true
            }
        }
    );
});

ビューに完全な名前を付けたいので、メソッドを追加して、これを行うときに

$scope.user = User().current();

hTMLで次のことをする代わりに

<p>{{ user.first_name }} {{ user.last_name }}</p>

私はこれをします

<p>{{ user.get_full_name }}</p>

このプロパティを$resourceに追加する方法はありますか？

javascriptangularjsangularjs-scopeangularjs-resource
21
Yousuf Jawwad

TransformResponseを使用してプロパティとして追加できますが、名前と姓を組み合わせて返すすべてのオブジェクトにメソッドを追加することをお勧めします。

app.factory('User', function ($resource) {
    var User = $resource(
        '/api/user/:listCtrl:id/:docCtrl/', {
            id: '@id',
            listCtrl: '@listCtrl',
            docCtrl: '@docCtrl'
        }, {
            update: {
                method: 'PUT'
            },
            current: {
                method: 'GET',
                params: {
                    listCtrl: 'current'
                }
            },
            nearby: {
                method: 'GET',
                params: {
                    docCtrl: 'nearby'
                },
                isArray: true
            }
        }
    );
    // add any methods here using prototype
    User.prototype.get_full_name = function() {
        return this.first_name + ' ' + this.last_name;
    };
    return User;
});

次に使用します：

<p>{{ user.get_full_name() }}</p>

プロトタイプを使用して追加された関数は、サービスによって返されるすべてのオブジェクトに追加されます。サービスプロパティの複雑な取得または設定を行う必要がある場合は、ヘルパーメソッドを追加するための優れた方法です。

56
Jeremy Zerr

angularでしばらく遊んだ後、$ resourceにプロパティを追加するよりも、カスタマーフィルターの方がはるかに賢明なアプローチになると思います。

ここにフィルターを行う方法があります

app.filter('getFullName', function () {
    return function (input) {
      if (input) {
        return input.first_name + ' ' + input.last_name;
      } else {
        return 'default';
      }
    };
  });
5
Yousuf Jawwad

transformResponseの方を見るといいと思います。

ところで、どのバージョンのangularjsを使っていますか？

1
falinsky