javascript - 一个 Angular Ui 路由器状态下的多个 URL

Question

我的应用程序中有一个 app.home 状态，其中列出了不同范围的专家。此外，我还有一个范围列表，我们可以根据这些范围筛选我们的专家(例如医学、法律、心理学等)。当我按范围过滤专家时，我需要更改浏览器中的 URL，因为用户可以访问此 URL 并获得已按他们可能需要的范围过滤的专家。我正在使用 ES6 语法和 Webpack 进行编译。所以，这是我的路由器:

home.config.js

function homeConfig ($stateProvider) {
    "ngInject";
    $stateProvider.state('app.home', {
        url: '/',
        controller: 'HomeCtrl',
        template: require('./home.html'),
        resolve: {
            users: function (User) {
               // Call a method from our UserService
               return User.userList().then((users) => users);
            }
        }
    });
}
export default homeConfig

这是我的home.controller.js:

class HomeCtrl {
    constructor(users, Categories) {
        "ngInject";
        this.filters = {};
        this.users = users;
        // Import categories from Categories Service
        this.categories = Categories.categories;
    }
}
export default HomeCtrl;

这是我的 index.js，其中这些模块被捆绑并随后包含在主应用程序模块中:

import angular from 'angular'; 
import homeConfig from './home.config';
import HomeCtrl from './home.controller';

let homeModule = angular.module('app.home', []);
homeModule.config(homeConfig);
homeModule.controller('HomeCtrl', HomeCtrl);

export default homeModule;

最后这是我的模板:

<ul>
    <li>
       <a href="#" ng-click="$ctrl.filters.scope = ''">Show all</a
    </li>
    <li ng-repeat="category in $ctrl.categories">
       <a ng-click="$ctrl.filters.scope = category">{{category}}</a>
    </li> 
</ul>
<!-- Specialists displayed -->
<div ng-repeat="user in $ctrl.users | filter: $ctrl.filters">
    <img ng-src="{{user.image}}"/>
    <p>{{user.userName}}</p>
</div>

当我过滤我的专家时，有什么方法可以更改 url 吗？

Answer 1

您可以简单地将过滤器添加到 $location 并在 Controller 中的激活函数中使用它。

// get current filter in activate function (e.g. www.example.com/?scope=law)
var filter = $location.search();
// => {scope: 'law'}

// set scope to 'law', when user applies new filter
$location.search('scope', 'law');

另一种解决方案是使用 $stateParams 解析您的状态。

.state('app.home', {
    url: '/:scope',
    template: require('./home.html'),
    controller: 'HomeCtrl',
    resolve: {
         users: ['$http','$stateParams', function($http, $stateParams) {
             //get users based on $stateParams 
         }]
     }
})

如果您只想在前端进行过滤，您可以获取所有用户并解析过滤器。然后在您的 Controller 中设置您最初解析的过滤器。

.state('app.home', {
    url: '/:scope',
    template: require('./home.html'),
    controller: 'HomeCtrl',
    resolve: {
         users: function (User) {
           // Call a method from our UserService
           return User.userList().then((users) => users);
         },
         filters: ['$http','$stateParams', function($http, $stateParams) {
             //get filters based on $stateParams 
         }]
     }
})

class HomeCtrl {
    constructor(users, Categories, filters) {
        "ngInject";
        this.filters = filters;
        this.users = users;
        // Import categories from Categories Service
        this.categories = Categories.categories;
    }
}
export default HomeCtrl;