angularjs - Closing a modal created by angulajs ui modal service using javascript -


background:

i have modal service used within angularjs application. service shows modals across application , works fine. want use same modalservice display progressbar me.

issue:

i want dynamically close modal using javascript code (without user clicks). couldn't figure out how that.

so modal progressbar can closed when processing completed. involves no user clicks (all controlled system)

modalservice code:

var modalservice = function($modal,$sce){ var mymodal;          var modaldefaults = {             backdrop: true,             keyboard: true,             modalfade: true,             templateurl: '../ecommon/views/modal.html'         };          var modaloptions = {             closebuttontext: 'close',             actionbuttontext: 'ok',             headertext: 'proceed?',             bodytext: 'perform action?',             showfooter: true         };          this.showmodal = function (custommodaldefaults, custommodaloptions) {             if (!custommodaldefaults) custommodaldefaults = {};             custommodaldefaults.backdrop = 'static';             mymodal = this.show(custommodaldefaults, custommodaloptions);             return mymodal;         };          this.show = function (custommodaldefaults, custommodaloptions) {             //create temp objects work since we're in singleton service             var tempmodaldefaults = {};             var tempmodaloptions = {};              //map angular-ui modal custom defaults modal defaults defined in service              angular.extend(tempmodaldefaults, modaldefaults, custommodaldefaults);              //map modal.html $scope custom properties defaults defined in service             angular.extend(tempmodaloptions, modaloptions, custommodaloptions);              if (!tempmodaldefaults.controller) {                 tempmodaldefaults.controller = function ($scope, $modalinstance) {                     $scope.modaloptions = tempmodaloptions;                     $scope.modaloptions.ok = function (result) {                         $modalinstance.close(result);                     };                      $scope.modaloptions.close = function (result) {                         $modalinstance.dismiss('cancel');                     };                  }             }              return $modal.open(tempmodaldefaults).result;         }; } 

call controller triggers dialog:

$scope.logout = function(){         var modaloptions = {             closebuttontext: 'w',             actionbuttontext: 'wlogout',             headertext: 'logout',             bodytext: "<h1>welcome </h1>"         };          var modal = modalservice.showmodal({}, modaloptions).then(function (result) {          console.log(result);         }); } 

i dig doc , found can use $modalstack service close opened modal anywhere :)

so use

$modalstack.dismiss("close"); 

when progress completes

ps:- don't forgot inject $modalstack in di.


Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -