Как перерисовать шаблон директивы и функцию ссылки?
-
21-12-2019 - |
Вопрос
Я создаю навигационное «дерево», которое в основном позволяет вам переходить к родительским представлениям следующим образом.
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();
});
}
}
}]);
Решение
Я считаю, что вы не настраиваете свой $watch
высказывание правильно.
Вам также следует быть осторожными при использовании .reverse
. reverse()
меняет местами записи в массиве на месте, что, вероятно, не то, что вы хотите сделать, поскольку это приведет к изменению массива в $rootScope
.
Вы можете использовать splice()
чтобы создать новую копию, а затем отменить это:
scope.treeNavs = $rootScope.treeNavs.splice().reverse();
$rootScope.$watch('treeNav', function(newVal) {
scope.treeNavs = newVal.splice().reverse();
});