Le schede in AngularJs non funzionano correttamente con UI-router e ui-bootstrap
-
21-12-2019 - |
Domanda
Sto usando una caldaia a media.js, puoi trovare l'intero codice qui .
Ho provato ad aggiungere 2 nuove schede alla pagina resa dopo uno degli articoli è stato selezionato dall'elenco. Per questa attività ho deciso di utilizzare sia il router ui-router che l'ui-bootstrap per Angular.js. Le 2 schede non funziona correttamente, posso passarle tra di loro e vedere correttamente il loro contenuto, ma occasionalmente quando torno indietro e seleziona la voce di menu dell'elenco degli articoli, ottengo una pagina vuota con le 2 schede e nient'altro. Ecco le modifiche al file view-articolo.client.view.html per includere 2 nuove schede (il contenuto precedente è stato copiato nei 2 file contenenti la parziale per le nuove schede):
<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>
.
Ho inserito al controller dell'articolo queste poche righe di codice:
$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);
});
});
.
Ecco la rotta.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'
});
}
]);
. Soluzione
Questo ha qualcosa a che fare con la direttiva sulla scheda Bootstrap Angular-UI e la callback Select ().Sembra che la callback Select () in Tab2 venga chiamata quando si naviga da Tab2.
Ho cambiato:
`<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>`
.
E la tua demo funziona ora.
Altri suggerimenti
Ho avuto lo stesso problema con Ui-bootstrap V0.11.2 , sono cambiato in V0.12.0 e ha funzionato!