angularjs - template - ui-router angular 6
$ rootScope. $ on("$ routeChangeSuccess) o $ rootScope. $ on(" $ stateChangeSuccess) no funciona cuando se usa ui-router(AngularJS) (1)
Estoy usando un enrutador UI para vistas anidadas en mi aplicación, pero al mismo tiempo quiero escuchar eventos cuando la ruta cambie. Antes de usar el enrutador UI, routeChangeSuccess funcionaba bien, pero después de ui-router no se activa. La documentación sugiere usar viewContedLoaded o stateChangeSuccess para ser utilizado, pero incluso ellos no son despedidos. Estoy pegando mi fragmento de código. Cualquier ayuda sería apreciada.
var app = angular.module(''SmartKart'', [''ngCookies'',''ngRoute'',''ui.bootstrap'',''angularPayments'',''ngAnimate'',''toaster'',''ui.router'',''LocalStorageModule'']);
app.config([''$routeProvider'',''$httpProvider'',''$urlRouterProvider'', ''$stateProvider'', function($routeProvider, $httpProvider,$urlRouterProvider,$stateProvider) {
$routeProvider
//TODO: Clean-up...most of these routes can be eliminated since we are now using nested views inside main.html. should probably use .otherwise(... main.html) or something
.when(''/postal'',
{
templateUrl: ''static/partials/landingPage.html'',
requireLogin: false
})
.when(''/register'',
{
templateUrl:''static/partials/landingPage.html'',
requireLogin: false
})
.when(''/login'',
{
templateUrl:''static/partials/landingPage.html'',
requireLogin: false
})
.when(''/forgot'',
{
templateUrl:''static/partials/landingPage.html'',
requireLogin: false
})
//TODO: Clean-up...most of these routes can be eliminated since we are now using nested views inside main.html
.when(''/noregister'',
{
templateUrl:''static/partials/landingPage.html'',
requireLogin: false
})
.when(''/contact'',
{
templateUrl:''static/partials/contact.html''
})
.when(''/home'',
{
templateUrl:''static/partials/main.html'',
requireLogin: true
})
.when(''/productList'', //so routeProvider will load main.html, stateProvider will load the product list nested view
{
templateUrl:''static/partials/main.html'',
requireLogin: true
})
.when(''/searchResults'', //so routeProvider will load main.html, stateProvider will load the product list nested view
{
templateUrl:''static/partials/main.html'',
requireLogin: true
})
.when(''/products/:storeId'',
{
templateUrl:''static/partials/main.html'',
requireLogin: true
})
.when(''/products/store/:storeId/department/:departmentId/aisle/:aisleId'',
{
templateUrl:''static/partials/main.html'',
requireLogin: true
})
// .when(''/productDetail/:productId'',
// {
// templateUrl:''static/partials/productDetail.html'' ,
// requireLogin: true
// })
.when(''/checkout'',{
templateUrl:''static/partials/page.html'',
requireLogin: true
})
.when(''/jobrequest'',{
templateUrl:''static/partials/driverJobRequest.html''
})
.when(''/orders'',{
templateUrl:''static/partials/page.html'', //stateProvider will load the Orders list as a nested view within the main html
requireLogin: true
})
.when(''/admin'',{
templateUrl:''static/partials/main.html''
})
.when(''/reset'',{
templateUrl:''static/partials/resetPassword.html''
})
.when(''/changePassword'',{
templateUrl:''static/partials/changePassword.html'',
requireLogin: false
})
.when(''/driver/:orderNumber'',{
templateUrl:''static/partials/main.html'',
requireLogin: false
})
.when(''/driver'',{
templateUrl:''static/partials/main.html'',
requireLogin: false
})
.when(''/profilepage'',{
templateUrl:''static/partials/profilePage.html'',
requireLogin: false
})
.when(''/'', {
templateUrl : ''static/partials/landingPage.html'',
requireLogin: false
});
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common[''X-Requested-With''];
$httpProvider.defaults.withCredentials = true;
//Used for controlling nested views inside main.html and page.html
$stateProvider
.state(''products'', {
url: "/productList",
templateUrl: "static/partials/productList.html",
controller: ''ProductListCtrl''
})
.state(''searchResults'', {
url: "/searchResults",
templateUrl: "static/partials/searchResults.html",
controller: ''ProductSearchResultsCtrl''
})
.state(''orders'', {
url: "/orders",
templateUrl: "static/partials/orderList.html",
controller: ''UserOrderListCtrl''
})
.state(''checkout'', {
url: "/checkout",
templateUrl: "static/partials/checkout.html",
controller: ''checkoutCtrl''
})
.state(''admin'', {
url: "/admin",
templateUrl: "static/partials/admin.html",
controller: ''AdminCtrl''
})
.state(''driver'', {
url: "/driver",
templateUrl: "static/partials/driverDashboard.html",
controller: ''DriverDashboardCtrl''
})
.state(''driverOrder'', { //gets assigned order for this number
url: "/driver/:orderNumber",
templateUrl: "static/partials/singleOrder.html",
controller: ''OrderCtrl'',
resolve: {
order: function($stateParams) {
return $stateParams.orderNumber;
}
}
});
}]);
app.run([''$rootScope'', ''$location'' ,''$cookieStore'', ''$state'', ''CacheManager'', function($rootScope, $location, $cookieStore, $state,CacheManager){
//(re)load cached values here
//CacheManager.loadCache();
$rootScope.$on([''stateChangeStart'', function(){
alert(''hello1'');
var urlCheck1 = $location.path() != ''/forgot'' && $location.path() != ''/register'' && $location.path() != ''/postal'' && $location.path() != ''/'';
var urlCheck2 = $location.path() != ''/jobrequest'';
if(urlCheck1 && urlCheck2){
if($cookieStore.get(''userToken'') == undefined){
$location.path(''/login'');
//seems insufficient to only check if the userToken is defined to go through here. we should check that it''s == XCSRF token?
} else if($cookieStore.get(''userToken'') != undefined && ($location.path() == ''/login'' || $location.path() == ''/'')){
$location.path(''/home'');
}
}
if ($rootScope.cartItems.length > 0){
showCart();
}
}]);
}]);
Dos cosas en tu código me parecen extrañas, lo que podría estar causando el problema (nuevamente, dado que solo puedo ver algo de tu código, podría estar equivocado).
La forma en que haces esto:
if ($location.path() == ''/orders''){ $state.go(''orders''); } else if ($location.path() == ''/admin''){ $state.go(''admin''); } else if ($location.path() == ''/productList''){ $state.go(''products''); } else if ($location.path() == ''/driver''){ $state.go(''driver''); } else if ($location.path() == ''/driverOrder/:orderNumber''){ $state.go(''driverOrder''); } else if ($location.path() == ''/driverOrder/:orderNumber''){ $state.go(''checkout''); }Parece que eso no debería ser necesario si está configurando sus estados en el bloque de configuración como muestran los ejemplos de UI-enrutador: consulte este enlace y desplácese hacia abajo hasta el paso (5). (Además, sus últimas dos sentencias else-if tienen la misma cláusula en la sentencia if, por lo que el ''$ state.go ('' checkout '');'' nunca se ejecutará).
Debido a que el bloque en el que envía usuarios a diferentes estados en función de $ location.path () está arriba del lugar donde está registrando el oyente, es posible que su aplicación ni siquiera esté ejecutando las líneas donde está intentando registrar al oyente. Trataría de subir el registro del oyente a más de ese gran bloque if / else. Además, estoy de acuerdo con lo que Phil Thomas sugirió en los comentarios, debe escuchar $ stateChangeStart al menos hasta que esté seguro de que el oyente se está registrando correctamente, ya que otros problemas podrían evitar el $ stateChangeSuccess.
Editar : Además, dado sus ediciones recientes, su oyente stateChangeStart no se ve bien. La forma en que está registrando al oyente debería ser así:
$rootScope.$on(''$stateChangeStart'',
function(event, toState, toParams, fromState, fromParams){
// logic
})
Además, dentro del oyente, no use $ location, solo use lo que le dan como argumentos al oyente. Por ejemplo, mire toState para ver a dónde está tratando de llegar el usuario. La razón para esto es que dentro de esa función, que es durante una transición, necesita saber hacia dónde intenta ir el usuario, mientras que $ location le dirá dónde está el usuario.