如何在 Angular UI 路由器中访问 $urlRouterProvider 的“否则”属​​性

Question

在某些情况下，我想导航到默认或“否则”状态。所以我需要从控制器获取路由对象中配置的其他状态。

当我尝试在指令的控制器中注入 $urlRouterProvider 时，出现错误：

错误：[$injector:unpr] 未知提供者：$stateProviderProvider

我做错了什么？

示例代码：

.config([ '$stateProvider', '$urlRouterProvider', '$locationProvider', ( $stateProvider, $urlRouterProvider, $locationProvider ) => {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/bbv/voorstellen/open');

    (...routing code)

}])

指令：

    .directive('bbvNav', [ '$state', ( $state ) => {
        return {
            restrict: 'E',
            template,
            scope: {
                titleBind: '&',
                onButtonClick: '&'
            },
            bindToController: true,
            controller: [ '$scope', function ( $scope ) {
                $state.go( <NAVIGATE TO URLROUTERPOVIDER.OTHERWISE> );
                console.log('Accessing $urlRouterProvider.otherwise state:'); // How do I get the value of $urlRouterProvider.otherwise here?
            }
        }
    })

Answer 1

在 rootScope 中存储 state 和 stateParams

 .run(function($rootScope, $state, $stateParams){
          $rootScope.$state = $state;
          $rootScope.$stateParams = $stateParams;
        })

使用 $state.go("state-name") 进入想要的状态

$rootScope.$state.go("state-name");

我试图用下面的 plunker 来演示

说明：点击状态2或状态3，然后点击主页按钮，将被重定向到主页。

demo to route to desired state

Answer 2

我认为您不能在指令中注入提供程序，只在配置中...
但是如果要访问controller/service/directive/...中的当前路由，可以注入$route，如下使用：

$route.current : {scope, params, templateUrl}

https://docs.angularjs.org/api/ngRoute/service/$route

同样在$routeChangeSuccess / $routeChangeStart 事件中，您可以通过第二个参数访问下一条路由

如需更多支持，请告诉我，您需要“否则”状态下的哪些信息，我们可以一起找到解决方案:)

更新

对不起，我跳过了，您正在使用 ui-router，我的回答是针对“ngRoute”，但我认为它非常相似。您应该可以通过$state 访问$urlRouterProvider.otherwise

更新：

(function(){
    // wrap to prevent user to interact with
    var urlProvider;
    app.config(["$urlProvider", function(provider){
        urlProvider = provider;
    }]);
    app.directive([...]{
        console.log(urlProvider); // log provider to see if you can access otherwise ( like $$otherwise ), due to otherwise is a function
    })
})();

Answer 3

确保您正在加载指令模块作为主应用模块的依赖项。例如使用：

angular.module('myApp', ['myApp.directive']);

注意：

angular.module('ModuleName', [])   // creates a module.
angular.module('ModuleName')       // gets you a pre-existing module.

Answer 4

我认为问题出在您的指令中使用的命名。您应该像这样更改注入名称：

.directive('bbvNav', [ '$stateProvider', '$urlRouterProvider', ( $state, $urlRouter ) => {
        return {
            restrict: 'E',
            template,
            scope: {
                titleBind: '&',
                onButtonClick: '&'
            },
            bindToController: true,
            controller: [ '$scope', function ( $scope ) {
                console.log('Accessing otherwise state:'); // How do I get the value of $urlRouterProvider.otherwise here?
            }
        }
    })

Answer 5

我正在使用这种方法来解决这种情况。 首先，我总是将我的默认状态置于常量中，所以每当我需要它时，我只需将常量注入控制器或服务以使用它...

常数

app.module('example').constant('defaultState','app.defaultState')

然后首先将其注入您的配置文件并与$urlprovider一起使用

配置

$urlRouterProvider.otherwise(function ($injector, defaultState) {
    var $state = $injector.get('$state');
    $state.go(defaultState);
});

因此，始终存在常量，只需将其注入您想要的任何组件并使用它...

控制器示例

.controller(defaultState){
   ... TODO ...
}