Question

我有一个州：

.state('series', {
    url: '/{series}/',
    template: '<div configurator-list></div>',
    resolve: {
        stateService: 'ConfiguratorStateService'
    },
    params: {
        series: '{series}'
    },
    controller: 'ConfiguratorListController',
    ncyBreadcrumb: {
        label: '{series}',
        parent: 'home'
    }
});

我想使用URL中{series}的实际值来更新一些内容。我迷路了，没有找到任何运气。一切都把我带到UI路由器页面，但我没有看到任何具体的例子。

Answer 1

您需要侦听任何UI-Router状态更改事件，并使用该函数中的参数来获取它。在您的应用运行时添加一个监听器（替换＆＃39; myApp＆＃39;的应用名称），详情如下...

(function() {
    angular.module('myApp')
        .run(runOptions);

runOptions.$inject = ['$rootScope', '$state'];

function runOptions($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {

        if (toState.name === 'series') {
            //output the parameter here... since the series parameter is actually the string of the url, use the url property
            console.log(toState.url);
        }
    });
}
})();

您还可以使用其他状态更改事件，具体取决于您的预期用途：https://github.com/angular-ui/ui-router/wiki#state-change-events

OR

与进一步阅读您的问题更相关的是，修改您的路线定义...

更改网址：＆＃39; / {series} /＆＃39;到＆＃39; /：系列＆＃39;

然后，在你的控制器......

angular.controller('ConfiguratorListController', function($stateParams) {
  var vm = this;
  vm.series = $stateParams.series;
}

在角度UI路由器中捕获和使用URL

1 个答案: