angular-modal Build Status
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) { return btfModal({ 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 itself controller('MyModalCtrl', function (myModal) { this.closeMe = myModal.deactivate; }). controller('MyCtrl', function (myModal) { this.showModal = myModal.activate; });
my-modal.html
<div class="btf-modal"> <h3>Hello {{name}}</h3> <p><a href ng-click="modal.closeMe()">Close Me</a></p> </div>
index.html
<div ng-app="myApp" ng-controller="MyCtrl as ctrl"> <a href ng-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) { var ctrl = this, timeoutId; ctrl.tickCount = 5; ctrl.closeMe = function () { cancelTick(); myModal.deactivate(); }; function tick() { timeoutId = $timeout(function() { ctrl.tickCount -= 1; if (ctrl.tickCount <= 0) { ctrl.closeMe(); } else { tick(); } }, 1000); } function cancelTick() { $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 myModal factory('myModal', function (btfModal) { return btfModal({ controller: function () { this.name = 'World'; }, controllerAs: 'ctrl', template: '<div class="btf-modal">Hello {{ctrl.name}}</div>' }); }). controller('MyCtrl', function (myModal) { this.showModal = myModal.activate; });
<div ng-app="myApp" ng-controller="MyCtrl"> <a href ng-click="ctrl.showModal()">Show the modal</a> </div>
The modal factory. Takes a configuration object as a parameter:
var modalService = 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.js
MIT