Модальное диаложество в AngularJS

Диалоговое окно — важный элемент в интерфейсах многих приложений. В этой заметке мы посмотрим, как в AngularJS вызвать модальный диалог, передать в него данные и получить результат (то есть действие пользователя) на примере бутстрапных диалогов Modal из ui.bootstrap (по ссылке есть примеры).

Для начала скачаем и подключим к странице скрипт Angular UI Bootstrap целиком, или кастомную сборку (не забудьте включить в нее Modal). Примерно вот так:

Теперь подключим модуль к нашему приложению AngularJS:

Чтобы использовать модальные диалоги в каком-нибудь контроллере, нужно внедрить зависимость от сервиса $modal:

Сервис $modal позволяет нам заранее создавать темплейты для диалогов, а потом указывать их при вызове. Создадим темплейт для диалога удаления чего-нибудь:

Сразу вставим в диалог радиокнопки, чтобы пользователь выбрал, как он хочет удалить item — этот экземпляр, этот и будущие или вообще все. Ну, как будто item — это рекуррентная календарная запись. На примере этих радиокнопок мы увидим, как передать в диалог какую-то информацию, и как забрать из диалога то, что пользователь в нем ввел или выбрал.
Обратите внимание на директивы ng-click у кнопок диалога — функции, указанные в этих директивах, должны быть реализованы в контроллере диалога. Именно они будут закрывать диалог и подтверждать или отменять удаление.
Сохраним этот темплейт где-нибудь, например в tpls/delete-dialog.html относительно корня приложения.

Теперь напишем контроллер:

В контроллер, помимо $scope, мы внедряем $modalInstance — экземпляр модального окна, с которым будет работать контроллер и передаем значение recurrence, которое указывает является ли наш элемент рекуррентным (т.е. увидит пользователь радиокнопки, или нет).
Затем мы определяем на $scope несколько значений, с которыми связаны элементы диалога (через директивы и ). Так, $scope.isRecurrent связан с тем, видимы наши радиокнопки или нет, а в $scope.deleteType попадет выбор пользователя из трех радиокнопок.

Функция ok(), связанная в темплейте диалога с соответствующей кнопкой, вызывает метод $modalInstance.close(). Этот метод закрывает диалог и позволяет вернуть какое-нибудь значение (в данном случае, выбранную радиокнопку).
Функция cancel() вызывает метод $modalInstance.dismiss(), также закрывающий диалоговое окно с возможностью указать причину.
Разница между close() и dismiss() заключается в том, что promise. возвращаемый при открытии модального окна, в случае вызова close() будет resolved. а в случае dismiss() — rejected .

Теперь допустим у нас есть где-то кнопка «удалить» напротив какой-то строки row (которая должна удалить эту строку). И есть функция deleteItem(row), которая вызывается по клику на эту кнопку. Откроем в ней наш новый диалог:

Что тут происходит? Мы вызываем метод open() из сервиса $modal, который открывает наше диалоговое окно. В качестве аргумента мы передаем объект со следующими настройками:

• templateUrl — путь к html-темплейту диалога;
• controller — контроллер диалога;
• size — размер окна; значение будет подставлено в класс с префиксом «modal-» — например, если size = sm, класс будет modal-sm;
• resolve — тут перечисляются значения, которые будут определены и переданы модальному окну; в данном случае мы передаем значение recurrence, которое у нас является свойством объекта row.

Описание остальных параметров можно найти на странице компонента.
Глядя на параметры templateUrl и controller, нетрудно догадаться, что мы можем использовать разные темплейты с одним контроллером, или один контроллер с разными темплейтами. В общем, сервис $modal достаточно гибок в работе.

Наконец, теперь, когда окно открыто, осталось лишь получить выбор пользователя (т.е. подтверждение или отмену). Это нетрудно сделать в той же функции deleteItem() с помощью возвращенного нам объекта modalInstance:

Суть в том, что свойство modalInstance.result — есть не что иное, как обычный promise. Соответственно, мы можем вызвать modalInstance.result.then() и передать 2 коллбэка — для resolved и для rejected. В данном случае мы используем только один коллбэк для resolved. поскольку нам не нужно ничего делать, если пользователь нажал Cancel. А в аргументе коллбэка будет то, что мы передали в контроллере диалога аргументом close(), то есть радиокнопка, выбранная пользователем.

Примерно так можно организовать модальные окна с помощью UI Bootstrap в AngularJS. На первый взгляд решение может показаться несколько громоздким. Но, в силу использования темплейтов и контроллеров, оно довольно гибкое и позволяет относительно компактно определить все нужные нашему приложению диалоги.

Инструкция - Про уникальное изобретение

Контроллер является сложным электронным прибором, предназначенным для управления оборотами вертушки.

На передней панели прибора есть дисплей для отображения данных (количества оборотов и таймера) и регулятор оборотов.

Чтобы включить Контроллер необходимо подключить его к сети 220 вольт и нажать на выключатель на шнуре питания.

На дисплее появится приветственная надпись.

Затем вертушка начнёт плавно набирать обороты, отображая информацию на дисплее если регулятор не выкручен в крайнее левое положение. Если регулятор предварительно был установлен на определенное количество оборотов то вертушка разгонится до этого количества оборотов.

Чтобы выключить Контроллер необходимо или повернуть регулятор оборотов на минимум, или отключить питание из разъёма*

* При отключении Контроллера, любым из 2-х способов, питание перестаёт поступать на вертушку сразу, но, Контроллер продолжает работать, в течение пары минут, от заряженных конденсаторов и раскрученного двигателя.

Для отправки комментария вам необходимо авторизоваться .

Инструкция - Про уникальное изобретение

Контроллер является сложным электронным прибором, предназначенным для управления оборотами вертушки.

На передней панели прибора есть дисплей для отображения данных (количества оборотов и таймера) и регулятор оборотов.

Чтобы включить Контроллер необходимо подключить его к сети 220 вольт и нажать на выключатель на шнуре питания.

На дисплее появится приветственная надпись.

Затем вертушка начнёт плавно набирать обороты, отображая информацию на дисплее если регулятор не выкручен в крайнее левое положение. Если регулятор предварительно был установлен на определенное количество оборотов то вертушка разгонится до этого количества оборотов.

Чтобы выключить Контроллер необходимо или повернуть регулятор оборотов на минимум, или отключить питание из разъёма*

* При отключении Контроллера, любым из 2-х способов, питание перестаёт поступать на вертушку сразу, но, Контроллер продолжает работать, в течение пары минут, от заряженных конденсаторов и раскрученного двигателя.

Для отправки комментария вам необходимо авторизоваться .

Tips’N Tricks

Разбираясь с возможностями настройки управляющих консолей (control surfaces) для работы с приложением Logic Pro 9, я наткнулся на интересную возможность одновременного назначения нескольких последовательно пронумерованных контроллеров (например, CC# 20, CC# 21, CC# 22 и т.д.) на несколько одинаковых, так же последовательно пронумерованных, параметров, хотя бы на те же фейдеры громкости канальных линеек или панорамные ручки.

На этот раз пришлось потратить довольно много времени на то, чтобы разобраться с данным вопросом, поскольку процесс назначения серии контроллеров на серию однотипных параметров несколько видоизменился с момента последней редакции документа Logic Pro 9 Control Surfaces Support (en).pdf (Поддержка управляющих консолей в Logic Pro 9) и поначалу просто ничего не получалось. Давайте сначала прочитаем инструкцию на стр. 40, а уже потом выработаем свой собственный алгоритм назначения контроллеров.

TNT #15: Logic Pro 9. Управляющие консоли. Назначение серии контроллеров.

Быстрый способ назначения в Logic Pro 9 сразу нескольких последовательно расположенных на управляющей консоли контроллеров на однотипные параметры канальных линеек или плагинов назначением только первого и последнего контроллеров с последующим автоматическим назначением всех оставшихся между ними контроллеров.

Для тех, кто еще не успел вовремя скачать на свой компьютер все руководства пользователя для пакета Logic Studio, напоминаем, что все нужные вам документы вы можете найти здесь. набрав в поиске нужный продукт (в нашем случае это — Logic Pro 9).

Назначение серии контроллеров в представлении Easy View

В Logic Pro существует быстрый способ, облегчающий назначение серии контроллеров на серию одинаковых параметров. Например, вы можете воспользоваться этим методом для назначения нескольких фейдеров на volume, регулировку громкости; для назначения нескольких кнопок на другие параметры канальной линейки, такие, как pan, solo или mute; либо для назначения серии контроллеров на комплект плагинных параметров.

Для назначения серии контроллеров на серию параметров

1 В Mixer (или в окне любого из плагинов) выделите параметр, которым вы хотите управлять в Logic Pro с помощью назначенного на него аппаратного контроллера (физической ручки или фейдера).

2 Выберите Logic Pro > Preferences > Control Surfaces > Learn Assignment for [parameter name] (Назначить на [название параметра]). [Помимо этого, вы можете воспользоваться клавиатурной командой Learn new Controller Assignment (Обучить новому контроллерному назначению), по умолчанию: Command-L, чтобы открыть окно Controller Assignments (Контроллерные назначения) и активировать режим обучения Learn].

Окно Controller Assignments откроется в представлении Easy View (Простой вид) с активированным режимом Learn (Обучение). В большинстве случаев название выделенного параметра показывается в поле Parameter (Параметр).

3 Назначьте первый контроллер в серии на первый параметр (например, назначьте фейдер 1 на управление громкостью канальной линейки 1).

4 Назначьте последний контроллер в серии на последний из параметров (например, назначьте фейдер 16 на управление громкостью канальной линейки 16). Количество контроллеров между первым и последним в серии должно совпадать с количеством параметров — между первым и последним. В нашем примере, разница между 1 и 16 составляет 15.

Появится диалог "Do you want to fill up in between?" ("Хотите заполнить промежуток между ними?").

5 Щелкните по кнопке OK для автоматического заполнения контроллерами с соответствующими номерами в промежутке между первым и последним назначаемыми параметрами.

Примечание: Вы можете использовать быстрый способ только для ручек и кнопок, которые посылают одиночное канальное сообщение, в котором первый байт данных — это номер контроллера, а второй байт данных — его значение. Помимо этого, номер контроллера может быть закодирован в MIDI-канале с фиксированным первым байтом данных. Обратитесь к документации, поставляемой вместе с устройством, для получения подробной информации о его структуре данных.

А теперь давайте посмотрим, что же происходит на самом деле. Прежде всего, подключите свои консоли или клавиши с достаточным количеством MIDI-контроллеров (кнопок, ручек или фейдеров). Если у вас имеются какие-либо управляющие консоли, которые в данный момент не поддерживаются приложением Logic Pro 9 (то есть, в самом приложении для них пока нет подходящих инсталлируемых модулей, как например, для консолей Mackie Control или Tascam) — данный быстрый способ назначения серии контроллеров придется вам по душе.

Чтобы разобраться с тем, как работает этот быстрый способ на практике, мы воспользуемся управляющей консолью Akai MPD32, любезно предоставленной нам компанией Slami в лице ее представителя Сергея Бударина. (Для любителей позлословить на тему «Ну, поня-а-атно, вот в чем дело-то! Опять реклама! С миру по нитке — MacSound'у на рубашку!» — наш сайт ни разу не коммерческий и ни копейки денег (так же, как и «подарков») ни с кого не получает. К тому же, Slami прекращает торговлю продукцией Akai. По уже установившейся «случайной» традиции, «совершенно случайно» В Контакте меня попросили помочь разобраться с настройкой именно контроллера Akai MPD32, а Сергей Бударин — и за это ему отдельное огромное спасибо! — просто выдал мне на тесты свою личную консоль. А вот конкретно по «контактовскому» вопросу мы постараемся сделать отдельную заметку).

Музыканты, которые не используют консоли Akai, могут пропустить следующий раздел, целиком посвященный настройке и синхронизации консолей Akai с приложением Logic Pro 9.

Только для пользователей консолей Akai

В первую очередь мы ознакомились с документацией Akai, касающейся работы MPD32 с приложением Logic Pro 9: некоторые непонятно куда спешащие музыканты, не прочитав документацию, резко берутся за самостоятельную настройку всех контроллеров Akai, даже не подозревая о том, что компания-разработчик уже давно выполнила часть этой работы.

Итак, мы зашли на сайт Akai и загрузили с него документ MPD and MPK Series - Setup With Logic Pro. из которого выяснили, что для начала работы с Logic Pro 9 в консоли Akai MPD32 необходимо загрузить пресет номер 15: GM Drums. а в Logic Pro 9 произвести синхронизационные настройки, полностью соответствующие изображениям на трех картинках, приведенных ниже.

Сначала произведите настройки приложения.

Выберите Logic Pro > Preferences > MIDI > вкладка Sync

Теперь внизу окна настроек приложения щелкните по кнопке MIDI Sync Project Settings. (Проектные установки синхронизации MIDI. ) и убедитесь, что у вас активны флажки передачи команд MIDI Machine Control (MMC). (MIDI Machine Control — это комплект команд, которые приложение Logic Pro использует для управления транспортными функциями совместимых с MMC магнитофонов, драм-машин и управляющих консолей).

Осталось лишь убедиться в том, что в установках проекта в панели Synchronyzation во вкладке General у вас включена внутренняя синхронизация (то есть, задающим генератором синхроимпульсов является приложение Logic Pro) и проверить управление приложением при помощи клавиш перемотки, воспроизведения, записи и остановки, расположенных на вашей консоли Akai.

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

Назначение 8 фейдеров на управление громкостью 8 канальных линеек

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

1 Запускаем приложение Logic Pro и в открывшемся диалоговом окне New выбираем шаблон Empty Project (Пустой проект).

2 Выбираем количество треков Number: 8. тип треков Type: Audio. формат треков Format: Mono. Убеждаемся, что флажки Input Monitoring (Мониторинг входного сигнала) и Record Enable (Готовность к записи) сняты (то есть, неактивны, иначе существует возможность возникновения акустической обратной связи между микрофоном и акустическими мониторами) и щелкаем по кнопке Create (Создать).

При назначении регулятора (ручки, фейдера или кнопки) физического контроллера на любой из элементов управления, расположенных на выделенном треке. регулятор этого контроллера будет управлять назначенным на него элементом параметра, расположенным на треке, выделенном в данный момент.

В нашем случае это выглядело бы следующим образом: как только мы присвоили бы ручке физического контроллера управление фейдером громкости, расположенным на выделенном треке, при переходе на любой другой трек та же самая ручка стала бы управлять фейдером громкости уже другого, только что выделенного трека. Но мы-то хотим сделать так, чтобы 8 фейдеров нашего Akai MPD32 управляли каждый своим фейдером громости, какой бы из треков мы ни выделяли и в каком бы из окон не находились.

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

3 Откройте Mixer (Микшер) и щелкните по любой из канальных линеек, кроме первой и последней из тех, на которые вы хотите назначить серию контроллеров).

Примечание: Канальная линейка трека, выделенного в области Arrange. обведена в Mixer зеленой рамочкой, тогда как канальные линейки, выделенные в микшере. окрашены светло-серым цветом. Поэтому, щелчок по заднему плану микшера снимет выделение со всех канальных линеек, но никак не повлияет на выделенный в области Arrange трек.

4 Щелкните по ручке фейдера громкости первой канальной линейки Audio 1 .

5 Выберите Logic Pro > Preferences > Control Surfaces > Learn Assignment for «Volume» (Обучить назначению на «Громкость») либо воспользуйтесь клавиатурной командой Command-L, чтобы открыть окно Controller Assignments (Контроллерные назначения) с одновременной активацией режима обучения Learn .

В случае с невыделенным треком, окно Controller Assignments откроется в представлении Expert View (Экспертный вид).

6 На Akai MPD32 (или на любом другом MIDI-контроллере) плавно передвиньте ручку первого фейдера.

Logic Pro запомнит это назначение и отобразит его параметры в правой части окна Controller Assignments .

Совет: Вы можете производить назначения одного или нескольких контроллеров, не вызывая окно Controller Assignments. Для этого воспользуйтесь той же самой клавиатурной командой назначения нового контроллера Command-L, только на этот раз не отпускайте модификационную клавишу Command, пока не назначите (нажмете, покрутите или подвинете) ручку на своем аппаратном контроллере. В этом случае назначение контроллера произойдет в фоновом режиме и режим Learn (Обучить) выключится сразу же после отпускания вами клавиши Command.

7 Перейдите в Mixer и на это раз щелкните по ручке фейдера громкости последней в серии канальной линейки. В нашем случае это будет канальная линейка Audio 8. Поскольку режим Learn по-прежнему включен, передвиньте ручку последнего фейдера на вашем аппаратном контроллере.

Logic Pro также запомнит и это назначение.

8 Щелкните по кнопке Learn Mode (Режим обучения) (или закройте окно Controller Assignments ). Если номера контроллеров, которыми управляют фейдеры вашего аппаратного контроллера, отличаются друг от друга на единицу (то есть, идут по порядку, друг за другом), и если количество физических контроллеров равно количеству назначаемых (в нашем случае, 8 физических фейдеров назначаются на 8 фейдеров канальных линеек), Logic Pro выдаст предупреждающее окошко:

«Похоже, вы только что определили два назначения на первый

и последний параметры последовательного ряда.

Не желаете ли заполнить промежуток между ними?»

9 Щелкните по кнопке OK. Если окно назначения контроллеров по-прежнему открыто, вы увидите, как в нем добавятся только что назначенный последний контроллер в серии и еще 6 промежуточных параметров:

Закройте окно, вернитесь в Mixer и смело двигайте фейдеры на своем аппаратном контроллере. Если вы все сделали правильно, каждый из восьми фейдеров будет управлять своим собственным, назначенным именно на него, фейдером громкости соответствующей канальной линейки.

Пользуясь описанным выше методом, вы можете назначать не только фейдеры и ручки, но так же и кнопки вашего аппаратного контроллера, например, на включение/выключение канальных кнопок Solo и Mute. или на управление командами масштабирования изображения Zoom In/Zoom Out.