Question

我的应用程序中有一个app.home状态，其中列出了不同范围的专家。此外，我还有一份范围列表，我们可以过滤我们的专家（例如 Medicine ， Law ， Psychology 等）。当我按其范围过滤专家时，我需要在浏览器中更改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>

当我过滤我的专家时，有没有办法更改网址？

Answer 1

您只需将过滤器添加到$location，然后在控制器的激活功能中使用它。

// 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 
         }]
     }
})

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

.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;

一个Angular Ui Router状态中的多个URL

1 个答案: