Comment restituer un modèle de directive et une fonction de lien ?

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

        }

    }]);

Answer 1

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