Как вернуть значения полей формы из модального окна?

Question

[Алексей Ярков]

Шаблон окна

.modal-header
	h5
		| {{modalOptions.headerText}}
.modal-body(ng-bind-html='modalOptions.bodyHtml')
.modal-footer
	button.btn(
				type='button', 
				ng-click='modalOptions.close()'
			)
		| {{modalOptions.closeButtonText}}
	button.btn.btn-primary(
							ng-click='modalOptions.ok(modalOptions.form)'
						)
		| {{modalOptions.actionButtonText}}

Сервис модальных окон

/*global angular*/
(function () {
	'use strict';
	
	angular
		.module('App')
		.service('modalService', ['$uibModal', 'APP_NAME', modalService]);

	modalService.$inject = ['$uibModal', 'APP_NAME'];

	function modalService($uibModal, APP_NAME) {

			var modalDefaults = {
				backdrop: true,
				keyboard: true,
				modalFade: true,
				templateUrl: 'js/app/view/ui.templates/modals/modalServiceTemplate.html',
				size: 'md'
			};

			var modalOptions = {
				closeButtonText: 'Отмена',
				actionButtonText: 'OK',
				headerText: APP_NAME,
				bodyText: 'Вы уверены?',
				form: {}
			};

			this.showModal = function (customModalDefaults, customModalOptions) {
				if (!customModalDefaults){
					customModalDefaults = {};
				}
				customModalDefaults.backdrop = 'static';
				return this.show(customModalDefaults, customModalOptions);
			};

			this.show = function (customModalDefaults, customModalOptions) {
				var tempModalDefaults = {};
				var tempModalOptions = {};

				angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

				angular.extend(tempModalOptions, modalOptions, customModalOptions);

				if (!tempModalDefaults.controller) {
					tempModalDefaults.controller = ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
						$scope.modalOptions = tempModalOptions;
						$scope.modalOptions.ok = function (result) {
							$uibModalInstance.close(result);
						};
						$scope.modalOptions.close = function (result) {
							$uibModalInstance.dismiss('cancel');
						};
					}]
					
					tempModalDefaults.controller.$inject = ['$scope', '$uibModalInstance'];
				}

				return $uibModal.open(tempModalDefaults).result;
			};

		}
		

})();

Вызов окна в контроллере

self.submitDelete = function () {
			var modalOptions = {
				closeButtonText: 'Отмена',
				actionButtonText: 'Удалить аккаунт',
				//headerText: 'Подтверждение',
				bodyText: 'Вы уверены, что хотите удалить аккаунт?',
				bodyHtml: $sce.trustAsHtml('<form ng-init="modalOptions.form = {login: "www"}"><input type="text" ng-model="modalOptions.form.login"></form>')
			};

			modalService.showModal({}, modalOptions).then(function (result) {
				console.log(result);
				//self.$auth.DeleteAccount();
			});
		};

Форма отображается в окне, но не могу придумать как забиндить ее правильно, чтобы при нажатии кнопки ОК возвращались значения полей формы.
Конечно я знаю, что мог бы наделать кучу шаблонов окон и вызывать то которое мне нужно. Но планируется сделать динамическую генерацию форм из данных, полученных с сервера.
Есть какой-то кошерный способ решить мою пролему?

Answer 1

[Алексей Ярков]

Решил проблему с использованием директивы.

// шаблон окна
// имя директивы - compile-html

.modal-header
	h4
		| {{modalOptions.headerText}}
.modal-body(compile-html, ng-bind-html='modalOptions.bodyHtml')
.modal-footer
	button.btn(
				type='button', 
				ng-click='modalOptions.close()'
			)
		| {{modalOptions.closeButtonText}}
	button.btn.btn-primary(
							ng-click='modalOptions.ok(modalOptions.form)'
						)
		| {{modalOptions.actionButtonText}}

// код директивы

(function () {
	'use strict';

	angular
		.module('App')
		.directive('compileHtml', ['$timeout', '$compile', compileHtml]);

	compileHtml.$inject = ['$timeout', '$compile'];

	function compileHtml($timeout, $compile) {
		var directive = {
			restrict:'A',
			link: function(scope,elem,attrs){
				$timeout(function(){
					$compile(elem.contents())(scope);    
				});
			}
		};
		return directive;
	}

})();

И все работает как надо ))

Comments

[_ _]

Блестящий такой, хромированный костыль. Особенно с $timeout

[Алексей Ярков]

Александр Марченко: зато крепкий )))и кучу шаблонов статических клепать не надо. Передал строку с HTML и все. А $timeout нужен чтобы сначала ng-bind-html сработал. Так на SO сказали ))

Answer 2

[_ _]

Проблема в том, что ng-bind-html не выполняет обработку контента, как шаблона angularjs, просто вставляет статичный html. Вам поможет что-то вроде этого
https://github.com/incuna/angular-bind-html-compile

Comments

[Алексей Ярков]

Спасибо за отклик, но не помогло