$ stateChangeSuccess, her zaman $ state.params değerinin aynı değeri

Question

Kafamı bu şekilde saramam, ui-route ve $stateChangeSuccess ve ve $watch ile mücadele ediyorum, iki sorunla karşılaştım. Bir parametrenin değerini değiştirmeye çalışıyorum, state değiştirdiğimde, bir URL'yi tıklatın. Alt devletleri kullandığımı bilmek çok önemli. Şu anki kurulumumla, $stateChangeSuccess'un yükte iki kez tetiklenmesini sağlıyorum, yani değeri hemen ayarlar. Yapmaya çalıştığım şey, yalnızca URL’yi değiştirmeye ayarlanmış olması.

Benim rota şöyle, ben init üzerinde açıkça false için openSesame parametresini ayarlamak nerede, şu var bir parametre benim denetleyicisi

.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 }, 
      }) 

değerini ayarlamak için çalışıyoruz, ancak ediyorum Bunu tetikler ve true olarak ayarlar.

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 durum değişikliği Ben $rootScope kullanırsanız yani kez çalışır.

Answer 1

kontrol edin. Bunun yerine $scope nesnesinde bir dinleyici ayarlayabilirsiniz. Aşağıdaki plunker bir göz atın.

Ve revize kodu:

(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'); 
    } 
    ]); 
}()); 

değer değişimi görmek için düğmeleri medication ve medication add tıklayın.

Answer 2

$ stateChangeSuccess ifadesinin geri çağrılması, from from totate, fromState. Veya Aslında $injecting$rootScope olmadan $stateChangeSuccess kullanabilirsiniz mevcut durumu adını

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

      $scope.openSesame = true; 
      } 

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