Как перерисовать шаблон директивы и функцию ссылки?

Question

Я создаю навигационное «дерево», которое в основном позволяет вам переходить к родительским представлениям следующим образом.

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

Этот список просто обычный <ul> оно должно меняться каждый раз при изменении представления и позволять пользователю нажимать на любую из приведенных выше ссылок для навигации.Я использую ui-router's $stateChangeStart для создания моего списка ссылок, проблема в том, что моя директива не «перестраивает» этот список каждый раз при изменении страницы.

Есть ли способ заставить директиву перерисовываться каждый раз, когда я меняю свое состояние?

Директива 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

Я считаю, что вы не настраиваете свой $watch высказывание правильно.

Вам также следует быть осторожными при использовании .reverse. reverse() меняет местами записи в массиве на месте, что, вероятно, не то, что вы хотите сделать, поскольку это приведет к изменению массива в $rootScope.

Вы можете использовать splice() чтобы создать новую копию, а затем отменить это:

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