$ stateChangeSuccess, immer der gleiche Wert von $ state.params

Question

Ich kann nicht meinen Kopf wickeln, ich habe wirklich Probleme mit ui-route und $stateChangeSuccess und $watch, bekam zwei Probleme. Ich versuche, einen Wert eines Parameters zu ändern, wenn ich die state ändere, klicken Sie auf eine URL. Ich denke, es ist wichtig zu wissen, dass ich Unterzustände verwende. Mit meiner aktuellen Einstellung bekomme ich, dass die $stateChangeSuccess zweimal beim Laden auslöst, was bedeutet, dass sie den Wert sofort setzt. Was ich versuche zu tun ist, es nur auf Änderung der URL gesetzt zu haben.

Meine Route wie folgt aussieht, ich versuche, den Wert eines Parameters

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

in meinem Controller zu setzen habe ich folgenden, wo ich die openSesame Parameter false explizit auf init gesetzt, sondern als beschrieben es auslöst und setzt es auf 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 die Zustandsänderung funktioniert einmal, das ist, wenn ich die $rootScope verwenden.

Answer 1

Sie tatsächlich $stateChangeSuccess ohne $injecting$rootScope verwenden können. Sie können stattdessen einen Listener für das Objekt $scope festlegen. Werfen Sie einen Blick auf die folgenden plunker.

Und der überarbeitete Code:

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

Ihre Tasten medication und medication add Klicken Sie auf die Wertänderung zu sehen.

Answer 2

Der Rückruf von $ stateChangeSuccess, Sie haben Zugriff auf State, fromState. Oder schauen Sie aktuelle Zustand Name

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

      $scope.openSesame = true; 
      } 

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