¿Cómo volver a renderizar una plantilla directiva y una función de enlace?

Question

Estoy creando un "árbol" de navegación que básicamente le permite navegar a las vistas principales de esta manera.

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

Esta lista es simplemente normal. <ul> eso debería cambiarse cada vez que se cambia la vista y permitir al usuario hacer clic en cualquiera de los enlaces anteriores para navegar.estoy usando ui-router's $stateChangeStart evento para construir mi lista de enlaces, el problema es que mi directiva no "reconstruye" esta lista cada vez que cambia la página.

¿Hay alguna manera de forzar que la directiva se vuelva a representar cada vez que cambio mi estado?

Directiva 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

Creo que no estás configurando tu $watch declaración correctamente.

También debe tener cuidado con el uso de .reverse. reverse() invierte las entradas en una matriz en su lugar, que probablemente no sea lo que desea hacer, ya que modificaría la matriz en el $rootScope.

Puedes usar splice() para crear una nueva copia y luego revertirla:

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