如何重新渲染指令模板和链接函数？

Question

我正在创建一个导航“树”，基本上允许您像这样导航到父视图

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

这个列表只是一个普通的列表 <ul> 每次视图更改时都应该更改，并允许用户单击上述任何链接进行导航。我在用 ui-router的 $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();
});