Question

当状态发生变化时，我想要更新一些项目，但我不确定如何使用ui-router来解决这个问题。

我已经将title，mainClass，headerSearch添加到状态（见下文），并且我想在stateChange成功时访问它们。所以我可能有类似class="{{ $state.curent.title }}"的东西，当状态改变时会继承title，所以如果家庭状态是活跃的，它将看起来像class="home"

这就是我尝试设置的方法（我使用的是ng-router，我有一个类似的设置，完美无缺）。

州控制员：

'use strict';

angular.module('cbuiRouterApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl',
        title: 'Home',
        mainClass: 'home',
        headerSearch: null
      });
  });

州改变：

$rootScope.$on('$stateChangeSuccess', function(event, current){
  // Assign site Title
  $rootScope.siteName = 'ChoppingBlock';
  //Change Page name
  $rootScope.title = current.$$route.title;
  // Add page class to <body>
  $rootScope.mainClass = current.$$route.mainClass;
  // add header navigation
  $rootScope.headerSearch = current.$$route.headerSearch;
});

Answer 1

你可以

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

之后，任何控制器都可以class="{{ $state.current.title }}"或$scope.$state.current.title。

更新和显示状态变化的状态

1 个答案: