0

サーバー上のリソースの状態を変更するボタンのあるページがあります。すべてが配線され、正常に動作しています。しかし、アクション URL の新しいテンプレートを表示したくないため、ブラウザーを「戻す」サーバー応答に頼らなければなりませんでした。

これはよくあることのように思えます: サーバーに何かを依頼してから、リソースの現在の状態を取得し、テンプレートを再取得せずに現在のテンプレートに再表示します。

ページのマークアップは次のようになります。

<a ng-href="/api/preference/{{video._id}}/add_to_watchlist" data-method="get">
    <i rel="tooltip" data-original-title="Add to watchlist" class="icon-3x action-icon
        icon-plus-sign" ng-class="{iconSelected : video.user_watchlist == 1}">
    </i>
</a>

これにより、$scope.video.watchlist の値に応じてアイコンが強調表示されます。クリックすると、サーバー上でカスタム アクションが起動され、視聴中のビデオが現在のユーザーのウォッチリストに追加されます。作成された URL は /api/preference/{{video._id}}/add_to_watchlist です。これにより、サーバー コントローラーが起動され、正しいことを実行しますが、/api/preference/{{video._id}} のテンプレートに移動する代わりに/add_to_watchlist サーバーは、Rails に「戻る」ようにクライアントに指示することで応答しますredirect_to :back。

明らかにこれは間違っています。機能しますが、ページ全体のマークアップとデータを再取得します。

元のデータをロードする AngularJS コントローラーは次のとおりです。

GuideControllers.controller('VideoDetailCtrl', ['$scope', 'Video',
    function($scope, Video) {
        var pattern = new RegExp( ".*/([0-9,a-f]*)", "gi" );
        //ugh, there must be a better way to get the id!
        $scope.video = Video.get({ id: pattern.exec( document.URL )[1] });
    }
]);

jsonを取得するリソースは次のとおりです

var VideoServices = angular.module('VideoServices', ['ngResource']);

VideoServices.factory('Video', ['$resource',
    function($resource){
        return $resource("/api/videos/:id", {id: "@id"}, {
            update: {method: "PUT"},
            query: {
                isArray: true,
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest"
                }
            },
            get: {
                isArray: false,
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest"
                }
            }
        });
    }
]);

どういうわけか私はする必要があります

  1. ブラウザの URL を変更せずにサーバーに add_to_watchlist を指示する
  2. テンプレートをリロードせずにビデオ json の再フェッチをトリガーします。
4

1 に答える 1

1

angularの $resource サービスを介して行うのではなく、サーバーでモデルの更新を処理するためにルーティングに依存しているようです。ここに手っ取り早く汚いものがあります：

ルーティングの代わりに、ユーザーがクリックしたときに関数を呼び出します。

<a ng-click="addToWatchlist(video._id)">
<i rel="tooltip" data-original-title="Add to watchlist" class="icon-3x action-icon
    icon-plus-sign" ng-class="{iconSelected : video.user_watchlist == 1}">
</i>
</a>

コントローラーにクリック ハンドラー関数を追加します (ここでは $http を使用していますが、ビデオ リソースにカスタム アクションを追加することをお勧めします)。成功のコールバックで、ビデオをリロードできます。または、さらに良いことに、add_to_watchlist アクションからビデオを返すことができます。

$routeParams について説明しているhttp://docs.angularjs.org/tutorial/step_07をチェックしてください(ビデオ ID の取得に関するコメントに答えるために)。

GuideControllers.controller('VideoDetailCtrl', ['$scope', '$http', '$routeParams', 'Video',
    function($scope, $http, $routeParams, Video) {
        $scope.video = Video.get({ id: $routeParams.videoId });
        $scope.addToWatchlist = function(videoId) {
            $http.get('/api/preference/'+videoId+'/add_to_watchlist').success(function() {
                $scope.video = Video.get({ id: $routeParams.videoId });
            };
        };


    }
]);
于 2013-10-24T20:48:03.813 に答える