2013-11-14 3 views
0

У меня есть одно требование. Я использую Angularstrap Modal для модального диалога (условия и условия пользователя).Функции совместного использования между двумя угловыми контроллерами js

Об этом модальном диалоге Две кнопки есть «Согласен» и «Не соглашаться».

У меня есть две ссылки. при нажатии на каждую ссылку открываются разные взгляды. Оба представления связаны с другим контроллером. И мое требование похоже на то, что мне нужно открыть диалог «Условия», когда приходит новый пользователь, и который нужно открыть при щелчке по событию обеих ссылок. В настоящее время мне приходится писать модальный код в каждом контроллере. (Такая же функция для открытия модальных и для модальных кнопок)

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

Какой может быть подход или это возможно?

+0

Вы хотите, скорее всего, услугу. Если вы хотите повторно использовать некоторый код манипуляции с DOM, вам, вероятно, нужна директива. – shaunhusain

ответ

0

Это скелет псевдо-код для моего диалога службы:

//modal container is the template with backdrop 
//and other modal elements (title, body, buttons, close button) 
loadContainerTemplate() 
//the actual html content for the modal body 
.then(loadDialogTemplate) 
.then(init); 

function init() { 
    //append container to body 
    //append dialog template to modal body 
    //create new scope for the modal 
    //set up buttons, title, width, etc. 
    //listen for ESC keypress 
    //initialize modal controller if needed 
    //prepare close function (destroy scope, remove dom, execute close callbacks, etc) 
    //compile modal html against scope 
} 

Моей служба будет принимать аргументы, такие как URL-адрес, название, ширина, кнопки модальных шаблона и их обратные вызовы, родительской область и т.д. В контроллере вы бы просто вызовите диалоговое окно, как это:

function($scope, Dialog) { 
    Dialog({scope: $scope, templateUrl: 'path/to/modal/body', buttons: { 
    'agree': agreeCallback, 
    'disagree': disagreeCallback 
    }, title: 'Modal title'}); 
} 

Или вы могли бы пойти один шаг дальше и создать TermsModalService что бы абстрактные детали, как шаблон, кнопки, обратные вызовы, название, и т.д. и использование лежащей в основе сервиса модального, чтобы показать фактический диалог. Термины modal будут легко использоваться между всеми контроллерами с одним слоем: TermsDialogService.show();

Смежные вопросы