AngularJS - открыть контроллер в диалоговом окне (шаблон загружается динамически)

Я играю с AngularJS. Я использую контроллер и templateUrl, чтобы все делалось автоматически :) В настоящее время в макете есть только директива <div ng-view></div>, в которую загружаются все вещи.

Я хочу открыть модальное окно (Bootstrap или jQuery UI, не имеет значения) и загрузить туда (внутри тела модального окна) контроллер, указанный по данной ссылке.

Точно так же, как каждая ссылка «открывается» (загружает шаблон и выполняет всю компиляцию и связывание DOM) внутри моего основного ng-view, я бы хотел, чтобы некоторые ссылки открывались внутри модального окна.

Я проверил, что могут предложить AngularStrap и Angular-UI Bootstrap, и ни в одном из них нет того, что я ищу.

AngularStrap может получить новый частичный шаблон, но не выполняет новый контроллер.

Есть ли какое-либо решение/фрагмент, который выполняет второй контроллер внутри Modal/Dialog?


javascript angularjs twitter-bootstrap angularjs-directive javascriptmvc
person migajek    schedule 02.06.2013    source источник

Ответы (2)


arrow_upward
12
arrow_downward

Вот plnkr, который демонстрирует использование angular + ui-bootstrap для запуска диалога с его собственный шаблон и контроллер.

Похоже, вы немного запутались в отношениях между контроллером и DOM. Контроллер не живет внутри DOM, на самом деле мы пытаемся разделить две вещи. Скорее, DOM связан с $scope, который управляется... (как вы уже догадались...) контроллером.

Итак, в примере контроллер загружается, когда элементы диалога добавляются в DOM, но контроллер не «открывается в диалоге» каким-либо осмысленным образом. Диалог может так же легко использовать тот же контроллер, что и основное приложение, заменив "DialogCtl" на "DemoCtl" в строке 17 демонстрации. Я пытаюсь сказать, что контроллер и диалог независимы. Диалоги не являются исполняющими контроллерами, скорее, они потребляют $scope, управляемых одним.

ОБНОВЛЕНИЕ: я только что узнал, что пример немного глючит, если вы закроете диалоговое окно, а затем попытаетесь снова открыть его, модальное окно отображается, но не диалоговое окно. Сейчас пытаюсь разобраться, не совсем понимаю, что происходит...

ОБНОВЛЕНИЕ 2: я думаю, что невозможность перезагрузить диалоговое окно связано с кэшированием шаблонов. В этом plnkr вы видите, что я добавляю "блокировщик кеша" в строку запроса и диалоговое окно перезагружается, а модальный фон — нет. пример на странице ui-bootstrap загружается и перезагружается без проблем, но они используют жестко закодированный шаблон (а не URL-адрес шаблона). Я тоже не смог заставить это работать в plnkr. О, радости работы на переднем крае :-/

ОБНОВЛЕНИЕ 3: я не могу понять, что происходит, но отправил этот вопрос для справки Открытие одного и того же диалога несколько раз с помощью $dialog

person Jason    schedule 02.06.2013
comment
Спасибо! Сейчас я пытаюсь понять демо :) Кстати, почему внутри index.html есть ng-include=index.html? Возможно, меня неправильно поняли, я знаю, что контроллер должен быть отделен от шаблона, что я имел в виду под контролируемым открытием в диалоге, так это то, что содержимое диалога является не только отдельным (частичным) шаблоном, но также имеет отдельную область действия и выполняется под отдельный контекст контроллера (например, EditCtrl), чтобы мне не приходилось загрязнять логику ListCtrl методом сохранения, который должен принадлежать EditCtrl, как мне пришлось бы, если бы я использовал директиву ng-include. - person migajek; 03.06.2013
comment
это был поддельный код, я удалил его. это было ненужным и неправильным, я до сих пор не уверен, почему диалог не перезапускается... - person Jason; 03.06.2013
comment
@ Джейсон, кажется, нет надежного способа заставить его работать в IE. щелчок по «запуску диалогового окна» показывает диалоговое окно дважды, но мы получаем следующую ошибку: Ошибка: достигнуто 10 итераций $digest(). Прерывание! Теперь, если вы очистите временные данные браузера и перезапустите IE, он снова будет работать (на 2 клика), я проверил ваше «ОБНОВЛЕНИЕ 3», оно работает, но не в чем проблема с ‹a› - person Ravish; 05.09.2013
comment
Я создал обновленный плункер с href="" вместо href="#", и его можно переустановить. открылся сейчас. (Получил решение от angularjs - Открытие одного и того же диалогового окна несколько раз с помощью $dialog< /а>). Однако мы все должны остерегаться того, что $dialog больше нет в ui-bootstrap. Вот обходной путь Дэна Уолина: $dialog из $modal. Но в принципе все равно хорошо. - person Peter V. Mørch; 20.02.2014
comment
@Jason Я обновился до angular 1.4.8 и ui-boostrap 1.2.4 plnkr.co/edit/I354huESaeHKNNCuV7hk?p=preview - person deFreitas; 13.03.2016

arrow_upward
0
arrow_downward

Похоже, директивы $dialog нет в текущей версии ui-bootstrap. http://angular-ui.github.io/bootstrap (0.11)

Альтернативной директивой может быть modal: http://angular-ui.github.io/bootstrap/#/modal

Вот плункер, чтобы увидеть, как это работает. http://plnkr.co/edit/?p=preview

person The Bndr    schedule 30.07.2014
comment
Этот URL-адрес plnkr не существует здесь, пример с новым ui-boostrap =предварительный просмотр - person deFreitas; 13.03.2016