Comment restituer un modèle de directive et une fonction de lien ?
-
21-12-2019 - |
Question
Je crée un "arbre" de navigation qui vous permet essentiellement de naviguer vers les vues parentales comme ceci
Home > Planner > Contacts > john.smith@hotmail.com
Cette liste est juste normale <ul>
cela devrait être modifié à chaque fois que la vue est modifiée et permettre à l'utilisateur de cliquer sur l'un des liens ci-dessus pour naviguer.j'utilise ui-router
c'est $stateChangeStart
événement pour constituer ma liste de liens, le problème est que ma directive ne "reconstruit" pas cette liste à chaque changement de page.
Existe-t-il un moyen de forcer le rendu de la directive à chaque fois que je change d'état ?
Directive TreeNav
app.directive('treeNav', ['$rootScope', function ($rootScope) {
return {
replace: true,
restrict: 'E',
template: '<ul>\
<li ng-repeat="item in treeNavs">\
<a ui-sref="{{ item.state }}">{{ item.name }}</a>\
<span> > </span>\
</li>\
</ul>',
link: function (scope, elem, attrs) {
scope.treeNavs = $rootScope.treeNav.reverse();
scope.$watch('$rootScope.treeNav', function (newVal, oldVal) {
scope.treeNavs = newVal.reverse();
});
}
}
}]);
La solution
Je crois que vous ne configurez pas votre $watch
déclaration correctement.
Vous devez également être prudent lorsque vous utilisez .reverse
. reverse()
inverse les entrées dans un tableau en place, ce qui n'est probablement pas ce que vous voulez faire, car cela modifierait le tableau sur le $rootScope
.
Vous pouvez utiliser splice()
pour créer une nouvelle copie, puis inverser celle-ci :
scope.treeNavs = $rootScope.treeNavs.splice().reverse();
$rootScope.$watch('treeNav', function(newVal) {
scope.treeNavs = newVal.splice().reverse();
});