Como renderizar novamente um modelo de diretiva e uma função de link?

Question

Estou criando uma "árvore" de navegação que basicamente permite navegar para visualizações principais como esta

Home > Planner > Contacts > john.smith@hotmail.com

Esta lista é apenas normal <ul> que deve ser alterado cada vez que a visualização for alterada e permitir que o usuário clique em qualquer um dos links acima para navegar.estou usando ui-routerde $stateChangeStart evento para construir minha lista de links, o problema é que minha diretiva não "reconstrui" essa lista toda vez que a página muda.

Existe uma maneira de forçar a renderização da diretiva toda vez que eu mudar meu estado?

Diretiva 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

Eu acredito que você não está configurando seu $watch afirmação corretamente.

Você também deve ter cuidado com o uso de .reverse. reverse() inverte as entradas em um array no lugar, o que provavelmente não é o que você deseja fazer, pois modificaria o array no $rootScope.

Você pode usar splice() para criar uma nova cópia e depois reverter isso:

scope.treeNavs = $rootScope.treeNavs.splice().reverse();
$rootScope.$watch('treeNav', function(newVal) {
  scope.treeNavs = newVal.splice().reverse();
});