Las pestañas en AngularJs no funcionan correctamente con UI-Router y UI-Bootstrap
-
21-12-2019 - |
Pregunta
Estoy usando una placa de calderilla media. Puede encontrar el código completo aquí .
Intenté agregar 2 nuevas pestañas a la página renderizada después de que se hayan seleccionado uno de los artículos de la lista. Para esta tarea, decidí usar el enrutador UI y la UI-Bootstrap para Angular.js. Las 2 pestañas no funcionan correctamente, puedo cambiar entre ellos y verlos correctamente, pero ocasionalmente cuando regrese y selecciono el elemento del menú de la lista de artículos, obtengo una página en blanco con las 2 pestañas y nada más.
Aquí están los cambios en el archivo View-Article.Client.View.html para incluir 2 pestañas nuevas (el contenido anterior se ha copiado en los 2 archivos que contienen el parcial para las nuevas pestañas):
<div ng-controller="ArticlesController">
<tabset>
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
<div ui-view></div>
</div>
He insertado en el controlador de artículos estas pocas líneas de código:
$scope.tabs = [
{ heading: 'SubA', route:'viewArticle.SubA', active:false },
{ heading: 'SubB', route:'viewArticle.SubB', active:false }
];
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.$on('$stateChangeSuccess', function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
Aquí está la ruta.js
'use strict'
angular.module('articles').config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('listArticles', {
url: '/articles',
templateUrl: 'modules/articles/views/list-articles.client.view.html'
}).
state('createArticle', {
url: '/articles/create',
templateUrl: 'modules/articles/views/create-article.client.view.html'
}).
state('viewArticle', {
url: '/articles/:articleId',
templateUrl: 'modules/articles/views/view-article.client.view.html'
}).
state('editArticle', {
url: '/articles/:articleId/edit',
templateUrl: 'modules/articles/views/edit-article.client.view.html'
}).
state('viewArticle.SubA', {
url: '/SubA',
templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'
}).
state('viewArticle.SubB', {
url: '/SubB',
templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'
});
}
]);
Solución
Esto tiene algo que ver con la directiva de la pestaña Bootstrap Angular-UI, y la devolución de llamada Seleccionar ().Parece que la devolución de llamada Select () en TAB2 se llama al navegar lejos de TAB2.
Cambié:
`<tab ng-repeat="t in tabs" heading="{{t.heading}}" select="go(t.route)" active="t.active"> `</tab>
a:
`<tab ng-repeat="t in tabs" heading="{{t.heading}}" ui-sref="{{t.route}}" active="t.active"> </tab>`
y su demostración funciona ahora.
Otros consejos
Tuve el mismo problema con ui-bootstrap v0.11.2 , cambié a v0.12.0 y funcionó!