[AngularJS] Using Services in Angular Directives
Directives have dependencies too, and you can use dependency injection to provide services for your directives to use.
Bad: If you want to use <alert> in another controller or page, you have to modify the AlertService. This might break things.
<!DOCTYPE html> <html> <head> <title>Egghead.io Tutorials</title> <link rel="shortcut icon" href="favicon.ico"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script> <script src="app.js"></script> </head> <body ng-app="app" ng-controller="MainCtrl as main"> <alert type="{{main.AlertService.alertType}}" ng-if="main.AlertService.isShowAlert">{{main.AlertService.alertMessage}}</alert> <button ng-click="main.showAlert();">Something Failed</button> </body> </html>
angular.module("app", ["ui.bootstrap"])
.controller('MainCtrl', function MainCtrl(AlertService) {
var mainCtrl = this;
mainCtrl.AlertService = AlertService;
})
.service('AlertService', function AlertService() {
var AlertService = {};
AlertService.false = true;
AlertService.showAlert = function() {
AlertService.alertType="success";
AlertService.alertMessage = "There is a message";
AlertService.isShowAlert = true;
}
return AlertService;
});
Good: Using Directive injected by the service. Then the <alert> is no longer bind with the controller anymore.
<!DOCTYPE html> <html> <head> <title>Egghead.io Tutorials</title> <link rel="shortcut icon" href="favicon.ico"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script> <script src="app.js"></script> </head> <body ng-app="app" ng-controller="MainCtrl as main"> <alert-message></alert-message> <!--<alert type="{{main.AlertService.alertType}}" ng-if="main.AlertService.isShowAlert">{{main.AlertService.alertMessage}}</alert>--> <button ng-click="main.showAlert();">Something Failed</button> </body> </html>
angular.module("app", ["ui.bootstrap"])
.service('AlertService', function AlertService() {
var AlertService = {};
AlertService.false = true;
AlertService.showAlert = function() {
AlertService.alertType="success";
AlertService.alertMessage = "There is a message";
AlertService.isShowAlert = true;
}
return AlertService;
})
.directive('alertMessage', function() {
return {
bindToController: true,
controller: 'AlertCtrl',
controllerAs: 'alertCtrl',
template: '<alert type="{{alertCtrl.AlertService.alertType}}" ng-if="alertCtrl.AlertService.isShowAlert">{{alertCtrl.AlertService.alertMessage}}</alert>'
}
})
.controller('AlertCtrl', function(AlertService) {
var alertCtrl = this;
alertCtrl.AlertService = AlertService;
})
.controller('MainCtrl', function(AlertService) {
var main = this;
main.AlertService = AlertService;
main.showAlert = function() {
main.AlertService.isShowAlert = true;
main.AlertService.alertType="danger";
main.AlertService.alertMessage = "Something wrong happened";
}
});
anuglar-ui-bootstrap:
http://angular-ui.github.io/bootstrap/
bindToController:
