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

Question

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

0

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

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

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

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

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

Пример Plunker с анимацией "остановки" и уведомляющим контроллером

jonasnas 05 июль 2015, в 15:37

Источник

Теги:

javascript

angularjs

animation

using-directives

1 ответ

Ещё вопросы

tuckerjt07 · Answer 1 · 2015-07-05T11-30-00.000Z

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

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

});

вот так.