Question

我用这种方式定义状态：

 $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>

在state.go之后，我想根据所选的状态改变div 1/2/3的css。如果想使用state.go而不是创建我自己的自定义函数。是否可以向状态函数添加一些参数/函数，以便能够更改css？

Answer 1

您可以使用$state.go传递参数。然后，您可以从控制器更新视图/ css。

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

您可以在ui-router docs了解更多相关信息。

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

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

Answer 2

在运行块中，在$ rootScope上添加$ state服务：

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

你的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>

这将添加＆＃34; someCssClass＆＃34; class为div 1，如果当前状态为LB或LB的任何子状态。

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

2 个答案: