angularPopService
Angular PopService is providing custom Bootstrap Modal Service in Angular -- supports creating popups and modals via a service. See a quick plunker or a full set of samples at https://github.com/GRajaMca/angularpopservice/.
Usage
Install with Bower (or NPM):
bower install angularpopservice# or... npm install angularpopservice
Then reference the minified script:
Developing
Specify the angularPopService as a dependency of your application:
angular; MainCtrl$inject = '$scope' '$rootScope' 'popService' ;
Now just inject the angularPopService into any controller, service or directive where you need it.
{ //$scope.alert function is used provide simple bootstrap alert $scope { //popService is the service provider of angularPopService //popService.showModal("Title","content","optional","optional","templateUrl") popService; }; };
angularPopService is Customized Bootstrap Modal,it works everything as JSON and templateUrl what you are going to provide
Now This sample is used to provide warning message to the end user and get the response from user,if the user said yes it will go to next step else break the process
<!--Template Url--><div class="modal fade"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">{{title}}</h4> </div> <div class="modal-body"> <p>{{warning}}</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="close()">OK</button> </div> </div> </div></div>
//$scope.warning function is used to provide warning message$scope {//popService.showModal("title","message","optional","optional","templateUrl");//for templateUrl checkout our sample and use the same format of close the window and buttonspopService;};
Sample for Complex Modal, Get the input from angularPopService
<!--Template samle --> × {{title}} <!--get all the input object start with data.yourObjectName --> User Name Password No Yes
$scope { //popService.showModal("title","optional","optional","optional","templateUrl") popService ;};
Sample for Posting the data from Controller to Modal View
<!--Template url for Posting the data --> × {{title}} <!--All your data passing from Controller you will receieve on object body in the modal view --> {{warning}} {{body.name}} OK
//sample for posting data from controller to Modal View $scope { //popService.showModal("Title","message","Object or data passing the Modal","optional","templateUrl") popService; };
Note
Try to use the angularPopService in sample how we provided,if you are passing the data or Object to the Modal view use 3rd parameter of popService.showModal function,and you will get the data into the body object in Modal View
If you are collecting input from Modal View bind the object to data and collect you will be receive the data in controller in the object of data.data,
Check out the above sample for your use..
Thanks
The special Thanks to angular modal service,this is inspired from angular modal service
Contact
Reach me on (https://www.linkedin.com/in/graja-mca-15445286/)