web-dev-qa-db-ja.com

どのようにui-router statechangeから$ state.current.nameを返すのですか

角度の場所を変更するときに.state('name')を返したいです。

私のrun()から、$stateオブジェクトを返すことができます：

 .run(function($rootScope, Analytics, $location, $stateParams, $state) {
      console.log($state);

working object

ただし、get$state.currentを試みると空のオブジェクトになります

.run(function($rootScope, $location, $stateParams, $state) {

      console.log($state.current);

empty

設定例：

 .config(function($stateProvider, $urlRouterProvider, AnalyticsProvider) {  
        $urlRouterProvider.otherwise('/');
        $stateProvider
        .state('home', {
            url: '/',
            views: {
              '': {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
              },
              'navigation@home': {
                templateUrl: 'views/partials/navigation.html',
                controller: 'NavigationCtrl'
              },
              'weekly@home': {
                templateUrl: 'views/partials/weekly.html',
                controller: 'WeeklyCtrl'
              },
              'sidepanel@home': {
                templateUrl: 'views/partials/side-panel.html',
                controller: 'SidePanelCtrl'
              },
              'shoppanel@home': {
                templateUrl: 'views/partials/shop-panel.html',
                controller: 'ShopPanelCtrl'
              },
              'footer@home': {
                templateUrl: 'views/partials/footer.html',
                controller: 'FooterCtrl'
              }
            }
          })
javascriptangularjsroutesangular-ui-router
34
Matthew Harwood

「$ stateChangeSuccess」をリッスンし、状態を急激に設定できます。例えば ​​-

$rootScope.$on('$stateChangeSuccess',
  function(event, toState, toParams, fromState, fromParams) {
    $state.current = toState;
  }
)
27
Sandeep Shabd

Sandeepのソリューションの代替として、次の方法でも実行できます。

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

このようにすると、every stateChangeではなく、1回だけ設定されます。基本的には、$ stateへの参照をどこかに保存するだけです。この例を単純にするために、$ rootScopeを選択しました。

私のコードでは、次のように簡単に参照できます。

<div ng-show="$state.includes('accounting.dashboard')"></div>

そして

<div>Current State: {{$state.current.name}}</div>

また、通常は$ stateParamsも保存するので、状態に関するさらに詳しい情報が得られます（ただし、この例では省略しました）。

10
PRB

試すこともできます。

.controller('yourApp', function($scope,$state) {
  $scope.state = $state;

これで、コンソールにログを記録できます。

console.log($state);

現在の状態を返します。

または、このようにhtmlビューでスコープを呼び出すことができます。

{{state.current.name}}

また、現在の状態を返します。

1
Kudos

コントローラーで状態をコンソールにしたい場合は、次のようにコンソールする必要があります。

console.log($state.current.name);

そして、それをビューでコンソールしたい場合：

コントローラー内：

$scope.state = $state.current.name;

テンプレート：そのように印刷

{{state}}
0
Kumar Rakesh