Come ricondizionare un modello di direttiva e una funzione di collegamento?

Question

Sto creando un "albero" di navigazione che fondamentalmente ti consente di navigare verso le viste dei genitori come

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

Questo elenco è solo un normale <ul> che dovrebbe essere cambiato ogni volta che la vista viene modificata e consente all'utente di fare clic su uno dei suddetti collegamenti sopra per navigare.Sto usando l'evento ui-router $stateChangeStart per accumulare il mio elenco di link, il problema è che la mia direttiva non "riemerge" questa lista ogni volta che cambia la pagina.

C'è un modo per forzare la direttiva a rendering ogni volta che cambio il mio stato?

Treenav Direttiva

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

Credo che non ti configura correttamente la tua dichiarazione $watch.

Dovresti anche stare attento con il tuo uso di .reverse.reverse() inverte le voci in un array in posizione , che probabilmente non è ciò che si desidera fare, poiché modificherebbe l'array sul $rootScope.

È possibile utilizzare splice() per creare una nuova copia e quindi invertire che:

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

.