A modal factory service for AngularJS that makes it easy to add modals to your app.
npm install angular-modal- Include the
modal.jsscript provided by this component into your app. - Optional: Include the
modal.cssstyle provided by this component into your html. - Add
btford.modalas a module dependency to your app.
app.js
angular.module('myApp',['btford.modal']).// let's make a modal called `myModal`factory('myModal',function(btfModal){returnbtfModal({controller: 'MyModalCtrl',controllerAs: 'modal',templateUrl: 'my-modal.html'});}).// typically you'll inject the modal service into its own// controller so that the modal can close itselfcontroller('MyModalCtrl',function(myModal){this.closeMe=myModal.deactivate;}).controller('MyCtrl',function(myModal){this.showModal=myModal.activate;});my-modal.html
<divclass="btf-modal"><h3>Hello {{name}}</h3><p><ahrefng-click="modal.closeMe()">Close Me</a></p></div>index.html
<divng-app="myApp" ng-controller="MyCtrl as ctrl"><ahrefng-click="ctrl.showModal()">Show the modal</a></div>If you add any listeners within the modal's controller that are outside the modal's scope,
you should remove them with $scope.$on('$destroy', fn () { ... }) to avoid creating a memory leak.
Building on the example above:
app.js
// ...controller('MyModalCtrl',function(myModal,$timeout){varctrl=this,timeoutId;ctrl.tickCount=5;ctrl.closeMe=function(){cancelTick();myModal.deactivate();};functiontick(){timeoutId=$timeout(function(){ctrl.tickCount-=1;if(ctrl.tickCount<=0){ctrl.closeMe();}else{tick();}},1000);}functioncancelTick(){$timeout.cancel(timeoutId);}$scope.$on('$destroy',cancelTick);tick();}).// ...Note: The best practice is to use a separate file for the template and a separate declaration for the controller, but inlining these options might be more pragmatic for cases where the template or controller is just a couple lines.
angular.module('myApp',[]).// let's make a modal called myModalfactory('myModal',function(btfModal){returnbtfModal({controller: function(){this.name='World';},controllerAs: 'ctrl',template: '<div class="btf-modal">Hello {{ctrl.name}}</div>'});}).controller('MyCtrl',function(myModal){this.showModal=myModal.activate;});<divng-app="myApp" ng-controller="MyCtrl"><ahrefng-click="ctrl.showModal()">Show the modal</a></div>The modal factory. Takes a configuration object as a parameter:
varmodalService=btfModal({/* options */})And returns a modalService object that you can use to show/hide the modal (described below).
The config object must either have a template or a templateUrl option.
These options work just like the route configuration in Angular's
$routeProvider.
string: HTML string of the template to be used for this modal.
Unless the template is very simple, you should probably use config.templateUrl instead.
string (recommended): URL to the HTML template to be used for this modal.
string|function (optional): The name of a controller or a controller function.
string (optional, recommended): Makes the controller available on the scope of the modal as the given name.
DOM Node (optional): DOM node to prepend . Defaults to document.body.
A modalService has just two methods: activate and deactivate.
Takes a hash of objects to add to the scope of the modal as locals.
Adds the modal to the DOM by prepending it to the <body>.
Returns a promise that resolves once the modal is active.
Removes the modal (DOM and scope) from the DOM. Returns a promise that resolves once the modal is removed.
Returns whether or not the modal is currently activated.
You can run the tests with karma:
karma start karma.conf.jsMIT