ディレクティブテンプレートとリンク関数を再レンダリングするにはどうすればよいですか?

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();
});