Wie rendere ich eine Direktivenvorlage und eine Linkfunktion neu?

Question

Ich erstelle einen Navigationsbaum, der es Ihnen grundsätzlich ermöglicht, zu übergeordneten Ansichten zu navigieren

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

Diese Liste ist einfach normal <ul> Dies sollte sich jedes Mal ändern, wenn die Ansicht geändert wird, und es dem Benutzer ermöglichen, auf einen der oben genannten Links zu klicken, um zu navigieren.ich benutze ui-router'S $stateChangeStart Event zum Aufbau meiner Linkliste verwenden, besteht das Problem darin, dass meine Anweisung diese Liste nicht bei jedem Seitenwechsel „neu aufbaut“.

Gibt es eine Möglichkeit zu erzwingen, dass die Direktive jedes Mal neu gerendert wird, wenn ich meinen Status ändere?

TreeNav-Anweisung

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

Ich glaube, Sie richten Ihre nicht ein $watch Aussage richtig.

Sie sollten auch bei der Verwendung vorsichtig sein .reverse. reverse() kehrt die Einträge in einem Array um an Ort und Stelle, was wahrscheinlich nicht das ist, was Sie tun möchten, da es das Array auf dem ändern würde $rootScope.

Sie können verwenden splice() um eine neue Kopie zu erstellen und diese dann umzukehren:

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