AngularJS，创建一个资源哈希

AngularJS, creating a resource hash

本文关键字：一个 资源 哈希 创建 AngularJS      更新时间：2023-09-26

尝试获取网址并在AngularJS控制器中将该请求重定向到获取json数据的最佳位置。VideoSearchCtrl绑定到搜索表单。生成的 url 对于模板是正确的，因此我使用控制器将其重定向到 json 数据的位置。

GuideControllers.controller('VideoSearchCtrl', ['$scope', 'VideoSearch',
    function($scope, VideoSearch) {
        var pattern = new RegExp(".*/search''?=(.*)");
        var params = pattern.exec( document.URL )[1];//redirect to videos to execute the search for the data
        $scope.videos = VideoSearch.query({ resource: "videos", action: "search", q: params });
    }
]);

这会将/videos/search？q=xyz 发送到查询。工厂创建资源： 

var VideoSearchServices = angular.module('VideoSearchServices', ['ngResource']);
VideoSearchServices.factory('VideoSearch', ['$resource',
    function($resource){
        return $resource("/:resource/:action:params", {resource: "@resource", action: "@action", params: "@params"}, {
            query: {
                isArray: true,
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest"
                }
            }
        });
    }
]);
但是服务器获取的网址是/videos/search%fq=xyz，而不是/

videos/search？q=xyz，因此调用"show"方法而不是自定义的"搜索"操作。 显然在某个地方有一些逃逸？或者，"？"也是资源工厂寻找的特殊模式？对于习惯于AngularJS或javascript的人来说，这可能是显而易见的。

我有一个用于搜索的模板，并且从其他位置检索了 json。两者都有效，但我不能要求使用上述代码的 json。

首先，做：

return $resource("/:resource/:action", {resource: "@resource", action: "@action"}, {

然后：

$scope.videos = VideoSearch.query({ resource: "videos", action: "search", q: params });

关键是params不是您必须向资源声明的 url 的一部分，您只需声明resource然后action然后添加参数，这对于所有路由都是自然

的

实际上，有一种更好的方法可以使用来自Angular和jQuery扩展的$location来做到这一点，它应该适用于任何未来添加的参数。只需将新参数添加到查询工厂。

GuideControllers.controller('VideoSearchCtrl', ['$scope', '$location', 'VideoSearch',
   function($scope, $location, VideoSearch) {
      var route = jQuery.extend(
         { resource: "videos", action: 'search' },
         $location.search()
      );
      $scope.videos = VideoSearch.query(route);
   }
]);
相关文章：