Создание повторно используемой модальной системы объекта/шаблона

Question

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

Наше приложение имеет несколько «модальных» окон, которые содержат формы. Они открываются из нескольких мест из нашего приложения и являются автономными.

Очень простой пример был бы:

var userDialog = new app.Dialogs.EditUser({ 
    user_id: 1, 
    save: function(){ 
    // callback stuff 
    } 
}); 
userDialog.show(); 

Я не уверен, как лучше справиться с этим в Угловом. Сначала я подумал о том, чтобы сделать это услугой, но у этого были бы шаблоны для фактической формы и т. Д.

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

Это кажется слишком сложным для директивы, потому что он будет контролировать свое собственное размещение в dom (как модальное, охватывающее все) и будет иметь некоторый код API, позволяющий нам получить/установить некоторые данные/параметры, показать/закрыть его и т. д.

Каков правильный Угловой способ создания повторно используемого элемента?

Answer 1

Вы можете быть вдохновлены Ui-загрузчике (или использовать его)

документация: https://angular-ui.github.io/bootstrap/#/modal

пример: http://plnkr.co/edit/?p=preview

создать модальное окно:

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    size: size, 
    resolve: { 
    items: function() { 
     return $scope.items; 
    } 
    } 
}); 

решительность имеет то же самое что означает, что в маршрутизаторе - указать зависимости локаторов контроллеров.

modalInstance.result - это обещание. Я думаю, что это лучшее решение, которое вызывает обратные вызовы (например, вы можете вовлечь результат в цепочку обещаний).

modalInstance.result.then(function (selectedItem) { 
    $scope.selected = selectedItem; 
}, function() { 
    $log.info('Modal dismissed at: ' + new Date()); 
});