我应该如何使用影响页面内容的直接链接构建 angularjs 页面答案

【问题标题】：How should I build an angularjs page with direct link that impact the page content我应该如何使用影响页面内容的直接链接构建 angularjs 页面
【发布时间】：2014-08-20 15:13:32
【问题描述】：

我有一个类似“谷歌搜索”的页面，显示后端返回的项目列表。

在页面中有一个包含许多不同字段的 HTML 表单。用户可以更改这些字段中的一个或多个值，然后后端将返回新的相关项目列表。

其中一个请求是让用户能够打开过滤结果的直接链接，到目前为止，这是通过 url 中的查询参数完成的，但现在我想将此页面更改为与 angularjs 异步工作。假设该过滤器表单中的字段可以不时更改。

那么，毕竟，在 angularjs 中处理复杂表单并允许表单的 get 方法的最佳方法是什么？

【问题讨论】：

标签： javascript angularjs location-provider

【解决方案1】：

您始终可以在您的范围内构建一个 URL 以响应用户的任何操作，然后执行<a ng-attr-href="{{view.userURL}}" target="_blank">{{view.userURL}}</a> 之类的操作

【讨论】：

【解决方案2】：

经过一番思考，我有了一个解决方案。

这里的一些“魔法”是在 $scope 中有一个对象（名为 $scope.filter）来保存所有表单输入值，因此它很容易使用，并且不需要对其进行任何修改如果向表单中添加了新的输入，则在控制器中加入。

    angular.module('myApp')

    .controller('myController', ['$scope', '$http' '$location', function($scope, $http, $location) {
        $scope.filter = {};

        $scope.init = function(){
            // $location.search() will return an object with the params,
            // those values are set to $scope.filter, and the filter values are initialized in case of direct link to the page
            $scope.filter = $location.search();

            $scope.executeFilter();
        };

        // doing the job of fetching the data I want to present,
        // using the filter values as a Json in that server call
        $scope.executeFilter = function(){
            // making sure to update the url with the current filter values,
            // so the user is able to copy the relevant url for a later use
            $location.search($scope.filter);

            var paramsAsJson = angular.toJson($location.search());

            $http.post('my-url', paramsAsJson).success(function(data) {
                // update view
            });
        };

        $scope.init();


    }]);

这是一个示例视图：

<form ng-submit="executeFilter()">
    <input name="some_text" type="text" ng-model="filter.some_text">
    <!-- more inputs here -->

    // it will work even with multiple select
    // (will pass to the server a json with array of selected values)
    <select multiple="multiple" name="some_options" ng-model="filter.some_options">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>   
    <button>Filter</button>
</form>

因此，现在如果用户尝试使用像 www.my-url.com/?some_text=foo 这样的 url 打开此页面，则带有指令 ng-model="filter.some_text" 的输入将在页面加载后包含“foo”，并且将发出带有该参数的服务器请求。

【讨论】：