基于 $routeProvider 参数的动态 ng-controller 指令

Question

我正在开发一个应用程序，我想多次重复使用同一个视图模板，但在不同 pages/routes 上略有不同。

例如，如果我有 "toys" 和 "women's clothing" 这样的类别，每个页面将具有相同的布局，但会有不同的过滤器选项等。

我认为最好的方法是在模板中使用动态 ng-controller 指令。

我想不通的是如何将类别从路由提供者传递到视图以使 ng-controller 动态化...

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/products/:category', {
        templateUrl: '/views/products.html',
        controller: 'productsController'
        // pass :category param to productsController
    });
}]);

app.controller('productsController', ['$scope', function($scope) {
    // get the parameter
    // do something to set the proper filter section from the parameter:
    // i.e women's clothing would contain filter by size, material, type, etc, toys would not
}]);

还是我处理这一切都错了？我不想对每个视图重新编码，因为它们会非常相似，只需稍作改动。

Answer 1

如果您使用默认的 ngRouter，则注入 $routeParams，如果您使用 ui-router，则注入 $stateParams。类别将在注入的对象中可用

基于 $routeProvider 参数的动态 ng-controller 指令

Dynamic ng-controller directives based on $routeProvider params

angularjs

ngroute