user675712 user675712 - 1 month ago 21
Javascript Question

Using $uibModal from a factory

I've been playing around with using uibModal from a factory instead of using it from within my controller. The dialog comes up, and the field data is returned to the service when OK is clicked, but, I don't know how to get the data back to my controller, where it will be added to my model Any pointers?

Here is my factory code:

'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;
});


Here is the controller code:

'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);
};
});

Answer

You could use close method available on $uibModalInstance service, in which you can pass data while closing a popup. And then you can utilize result promise object which does gets called when modal gets closed. Whatever data passed from $uibModalInstance.close method is available there. Make sure you are returning promise returned by $uibModal.open method.

Factory

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;
};

Controller

DialogService.addNewItem('views/addNewItem.html', self)
.result.then(function(data) {
   console.log("data", data); // print { data: 'MyCustomData' }
});

Modal Controller

$scope.cancel = function () {
    $uibModalInstance.close({data: 'MyCustomData'});
};
Comments