$ stateChangeSuccess, всегда то же значение $ state.params

Question

Я не могу обернуть голову вокруг этого, я действительно борюсь с ui-route и $stateChangeSuccess и $watch, получил две проблемы. Я пытаюсь изменить значение параметра, когда я изменяю state, щелкните URL-адрес. Я думаю, важно знать, что я использую суб-состояния. С моей текущей настройкой я получаю, что $stateChangeSuccess запускает два раза при загрузке, то есть сразу устанавливает значение. То, что я пытаюсь сделать, это только установить его при изменении URL-адреса.

Мой маршрут выглядит так, я пытаюсь установить значение параметра

.state('medications', { 
       url: '/medications', 
       templateUrl: '/partials/home.html', 
       controller: 'mainController', 
       params: { showSection: false }, 
       resolve: { 
        postPromise: ['medicationservice', function(medicationservice) { 
         return medicationservice.getAll(); 
        }] 
       } 
      }) 
      .state('medications.add', { 
       url: '/add', 
       templateUrl: '/partials/home.html', 
       controller: 'mainController', 
       params: { showSection: true }, 
      }) 

в моем контроллере я получил следующее, где я установить параметр openSesame в false явно на init, но, как описал, что он запускает и устанавливает его на true.

mainModule.controller('mainController', [ 
     '$scope', 
     '$state', 
     '$rootScope', 
     'medicationservice', 
     function($scope, $state, $rootScope, medicationservice) { 
      $scope.medication = {}; 
      $scope.medications = medicationservice.posts; 
      $scope.openSesame = false; 

      $rootScope.$on("$stateChangeSuccess", function() { 
       $scope.openSesame = true; 
       console.log($scope.openSesame); 
      }); 
}]); 

in my plunker изменение состояния работает один раз, то есть, если я использую $rootScope.

Answer 1

Вы можете использовать $stateChangeSuccess без $injecting$rootScope. Вместо этого вы можете установить прослушиватель на объекте $scope. Взгляните на следующие plunker.

И пересмотренный код:

(function() { 
    var app = angular.module('myApp', ['ui.router']); 
    app.controller('mainController', [ 
    '$scope', 
    '$state', 
    function($scope, $state) { 
     $scope.medication = {}; 
     $scope.openSesame = false; 

     $scope.$on('$stateChangeSuccess',function(event, toState){ 
     $scope.openSesame = toState.params.showSection; 
     }); 

     $scope.triggerMe = function() { 
     alert('yes'); 
     }; 
    } 
    ]); 

    app.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 

     $stateProvider 
     .state('medications', { 
      url: '/medications', 
      template: '<div>{{openSesame}}</div>', 
      controller: 'mainController', 
      params: { 
      showSection: false 
      } 
     }) 
     .state('medications.add', { 
      url: '/add', 
      template: '<div>{{openSesame}}</div>', 
      controller: 'mainController', 
      params: { 
      showSection: true 
      }, 
     }); 

     $urlRouterProvider.otherwise('medications'); 
    } 
    ]); 
}()); 

Нажмите ваши кнопки medication и medication add, чтобы увидеть изменения значения.

Answer 2

Обратный вызов $ stateChangeSuccess, у вас есть доступ кState, fromState. Или проверить текущее состояние имя

$rootScope.$on("$stateChangeSuccess", function() { 
      if ($state.current.name == "medications.add") { 

      $scope.openSesame = true; 
      } 

      console.log($scope.openSesame); 
});