#javascript #angularjs #angular-ui-bootstrap #bootstrap-modal #angular-services
#javascript #angularjs #angular-ui-bootstrap #bootstrap-модальный #angular-сервисы
Вопрос:
Я играл с использованием uibModal с фабрики вместо того, чтобы использовать его из моего контроллера. Появляется диалоговое окно, и данные поля возвращаются в службу при нажатии кнопки OK, но я не знаю, как вернуть данные обратно на мой контроллер, где они будут добавлены к моей модели Какие-либо указатели?
Вот мой заводской код:
'use strict';
angular.module('ngTableScopeApp')
.factory('DialogService', function($uibModal){
var DialogService = {};
DialogService.newObj = {};
DialogService.addNewItem = function(template, $q){
this.modalInstance = $uibModal.open({
templateUrl: template,
controller: function($scope, $uibModalInstance){
$scope.ok = function () {
$uibModalInstance.close($scope);
return this.newObj;
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
return null;
};
}
});
};
return DialogService;
});
Вот код контроллера:
'use strict';
/**
* @ngdoc function
* @name ngTableScopeApp.controller:MainCtrl
* @description
* # MainCtrl
* Controller of the ngTableScopeApp
*/
angular.module('ngTableScopeApp')
.controller('MainCtrl', function (NgTableParams, DummyData, DialogService) {
var self = this;
self.data = DummyData.generateData(1);
var createUsingFullOptions = function() {
var initialParams = {
count: 10 // initial page size
};
var initialSettings = {
// page size buttons (right set of buttons in demo)
counts: [5, 10, 25, 50],
// determines the pager buttons (left set of buttons in demo)
paginationMaxBlocks: 13,
paginationMinBlocks: 2,
dataset: self.data //DummyData.generateData(1)
};
return new NgTableParams(initialParams, initialSettings);
};
self.customConfigParams = createUsingFullOptions();
self.addNewItem = function(){
DialogService.addNewItem('views/addNewItem.html', self);
};
});
Комментарии:
1. Надеюсь, вы сможете получить доступ к данным с контроллера, используя переменную DialogService.newObj.
Ответ №1:
Вы можете использовать close
метод, доступный в $uibModalInstance
сервисе, в котором вы можете передавать данные при закрытии всплывающего окна. И затем вы можете использовать result
объект promise, который вызывается при закрытии modal. Любые данные, переданные из $uibModalInstance.close
метода, доступны там. Убедитесь, что вы возвращаете обещание, возвращенное $uibModal.open
методом.
Фабрика
DialogService.addNewItem = function(template, $q){
this.modalInstance = $uibModal.open({
templateUrl: template,
controller: function($scope, $uibModalInstance){
$scope.ok = function () {
$uibModalInstance.close({ data: 'OK Called' });
};
$scope.cancel = function () {
$uibModalInstance.close({ data: 'Cancel Called' });
};
}
});
};
return this.modalInstance;
};
Контроллер
DialogService.addNewItem('views/addNewItem.html', self)
.result.then(function(data) {
console.log("data", data); // print { data: 'MyCustomData' }
});
Модальный контроллер
$scope.cancel = function () {
$uibModalInstance.close({data: 'MyCustomData'});
};
Комментарии:
1. должен возвращать
$uibModal.open()
экземпляр из метода service2. также для более общего использования может вернуться
modalInstance.result
. Затем контроллер просто управляет обещанием3. @charlietfl но что тогда, если пользователь захочет поместить обработчик поверх
.opened
других параметров, они будут скрыты4. Может передавать обратные вызовы в качестве аргументов. У меня есть несколько модальных фабрик, у которых также есть вспомогательные методы, которые затем вызывают функцию, которая переносит
$uibModal.open
и настраивает ее по-разному в зависимости от регистра5. я часто делаю такие вещи, как
openModal( type, data, opts)
затем использую это на заводе, чтобы настроить, какой модальный контроллер и другую конфигурацию и т. Д