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. 告诉服务器 add_to_watchlist 而不更改浏览器 URL
  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 操作返回视频。

查看http://docs.angularjs.org/tutorial/step_07，其中解释了 $routeParams（回答您关于获取视频 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 回答