在state.go（ui-router）之后添加功能

I define states this way:

我用这种方式定义状态:

 $stateProvider.
        state('LB', 
           { url: '/LB', 
             templateUrl: 'LBTemplates/LunchBox.html', 
             controller: "lunchBoxCtrl" 
        }).
        state('Search', 
           { url: '/Search', 
             templateUrl: 'LBTemplates/Search.html', 
             controller: "searchCtrl" 
        }).
...

on html:

  <div ui-view></div>
  <div id=1>1<div>
  <div id=2>2<div>
  <div id=3>3<div>

after state.go ,I want to change css of div 1/2/3 depending on the state selected. If would like to use state.go and not create my own custom function. is it possible to add some parameter/function to the state function that enable to change the css?

在state.go之后,我想根据选择的状态更改div 1/2/3的css。如果想使用state.go而不是创建我自己的自定义函数。是否可以在状态函数中添加一些参数/函数来改变css?

2 个解决方案

#1

in a run block, add $state service on the $rootScope:

在运行块中,在$ rootScope上添加$ state服务:

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

in your html:

在你的HTML中:

  <div ui-view></div>
  <div ng-class="{ someCssClass: $state.includes('LB') }>1<div>
  <div ng-class="{ someCssClass: $state.includes('Search') }>2<div>
  <div ng-class="{ someOtherCssClass: !$state.includes('Search') }>3<div>

This will add the "someCssClass" class to div 1, if the current state is LB or any substate of LB.

如果当前状态是LB或LB的任何子状态,这将把“someCssClass”类添加到div 1。

#2

You can pass in parameters with $state.go. Then you can update the view/css from your controller.

您可以使用$ state.go传入参数。然后,您可以从控制器更新view / css。

$state.go('LB', params);

You can read more about it at the ui-router docs.

您可以在ui-router docs上阅读更多相关信息。

It's a bit ugly. But it will catch the events

这有点难看。但它会抓住这些事件

$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { 
    if(toState.name == 'LB') {
       //Do something
    }
})

#1