Угловая лучшая практика. Действия контроллера, запускающие анимацию

Я хочу показать некоторый круг прогресса, пока я жду (опрашиваю) сервер. Я использую для этого какой-то плагин jquery Circle-Progress. Я хочу выяснить, каков наиболее распространенный подход к условному запуску круга, а затем в какой-то момент уведомить его об остановке. Затем я хочу, чтобы этот круг завершил полный раунд (дополнительное время) и уведомил контроллер о том, что анимация «круг» завершена.

Что я делаю сейчас, так это создаю директиву для движения по кругу и наблюдаю за некоторыми атрибутами, чтобы знать, когда начинать/останавливать анимацию. Затем, когда наблюдаемый атрибут completed изменяется на true, директива завершает выполнение текущего круга, выполняет некоторую дополнительную анимацию (затухание) и вызывает атрибут 'on-change' для уведомления контроллера.

Для меня это выглядит так, будто я делаю это слишком сложно. Мне нужно соблюдать множество атрибутов «когда начинать», «когда останавливаться», а затем дополнительный атрибут для метода обратного вызова.

Это обычный подход для таких ситуаций? Может быть, мне стоит попробовать сделать это с анимацией? Я постоянно сталкиваюсь с этой проблемой, когда хочу интегрировать некоторые существующие jquery UI features в приложение angular.

P.S. Я хочу, чтобы эту директиву можно было использовать во многих разных контроллерах.

Пример планкера с остановкой анимации и уведомлением контроллера


person jonasnas    schedule 05.07.2015    source источник


Ответы (1)


Я бы не стал помещать его в контроллер, директива - правильное место для взаимодействия с DOM. Насколько я понимаю, вам нужно следить за изменениями в нескольких областях на странице. Для этого вам не обязательно следить за несколькими переменными. Вы можете передать несколько имен переменных в директиву как атрибуты, а затем установить

scope.$watch(attrs.MyVar, function () {
      //Do something 
      scope[attrs.MyFunc]();

});

вот так.

person tuckerjt07    schedule 05.07.2015