[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";
        }
    });