Блог

Главная - Вопросы по программированию - Проверяет, перезагружен ли вложенный просмотр; angularjs, ui-router

Проверяет, перезагружен ли вложенный просмотр; angularjs, ui-router

#javascript #angularjs #angularjs-directive #watch #angular-ui-router

#javascript #angularjs #angularjs-директива #Смотреть #angular-ui-router

Вопрос:

Я использую ui-router в angular js для вложенных представлений. Директива в одном из моих родительских представлений требует следить за перезагрузкой вложенного просмотра. Может кто-нибудь сказать мне, как я буду смотреть, перезагружен ли вложенный просмотр внутри представления?

Вот мой HTML

 <body>
  <header myDirective></header>
  <div id="content" ui-view name="bodyContent"></div>
</body>

Директива JS

 myApp.directive('myDirective', function(){
return function(scope,element,attr){
    scope.$watch('$viewContentLoaded', function(){
        element.on("click", function(){
            // do something
        });

        element.parent().find('#content').on("click", function(){
            //do something
        })
    });
};
})

Здесь $watch оператор отслеживает только загрузку родительского представления. Что мне нужно сделать, так это добавить прослушиватель событий для #content каждого изменения или перезагрузки вложенного представления (bodyContent).

Ответ №1:

Я смог найти решение, используя события изменения состояния angular. Вот как я решил проблему:

До сих пор я наблюдал за переменной $viewContentLoaded родительского представления, что не очень помогло. Мне пришлось наблюдать за переменной $viewContentLoaded дочернего представления. Итак, сначала я проверил «Успешное изменение состояния», используя scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState )) Здесь, переменная event важна. У него есть targetScope переменная, которая вызывает у нас беспокойство. Теперь все, что я сделал, это просмотрел $viewContentLoaded переменную targetScope и добавил к ней прослушиватель событий. Код выглядит следующим образом

 myApp.directive('myDirective', function(){
    return function(scope,element,attr){
        scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState){
            event.targetScope.$watch('$viewContentLoaded', function(){
                element.on("click", function(){
                    // do something
                });

                element.parent().find('#content').on("click", function(){
                    //do something
                })
            })

        });
    };
})

Я надеюсь, что это принесет пользу другим. 🙂

Комментарии:

1. не могли бы вы добавить для этого пример code pen или jsfiddle?

2. Хорошее решение, для этого действительно должен быть метод по умолчанию в ui.router.

Метки: