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:

http://flipjs.io/2014/09/09/isolate-scope-controller-as/

[AngularJS] Using Services in Angular Directives的更多相关文章

  1. [AngularJS] Accessing Services from Console

    Using the Chrome console, you can access your AngularJS injectable services. This is down and dirty ...

  2. AngularJS 之Services讲解

    Angular带来了很多类型的services.每个都会它自己不同的使用场景.我们将在本节来阐述. 首先我们必须记在心里的是所有的services都是singleton(单例)的,这也是我们所希望得到 ...

  3. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  4. AngularJS的核心对象angular上的方法全面解析(AngularJS全局API)

    总结一下AngularJS的核心对象angular上的方法,也帮助自己学习一下平时工作中没怎么用到的方法,看能不能提高开发效率.我当前使用的Angularjs版本是1.5.5也是目前最新的稳定版本,不 ...

  5. [AngularJS] Consistency between ui-router states and Angular directives

    ui-router's states and AngularJS directives have much in common. Let's explores the similarities bet ...

  6. [Angular Directive] Combine HostBinding with Services in Angular 2 Directives

    You can change behaviors of element and @Component properties based on services using @HostBinding i ...

  7. [AngularJS] Hijacking Existing HTML Attributes with Angular Directives

    Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique ...

  8. [译]在AngularJS中何时应该使用Directives，Controllers或者Service

    原文: http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/ Services Servic ...

  9. AngularJS学习 01进入Angular世界

    Angular下载 各个版本的下载地址:https://code.angularjs.org/ 打开上述URL,页面如下图: 点击需要的版本,跳出如下页面: 点击红色框内容即可下载完整的压缩包. 还可 ...

随机推荐

  1. Ansible的循环

    Ansible的循环 1.       前言 有可能在一个任务中,可能要做很多事情,例如创建多个用户,安装很多个包等,那么就有可能用到循环. 2.       标准循环 重复的任务可以用下面的方式: ...

  2. signal()函数

    转自:http://blog.csdn.net/sddzycnqjn/article/details/7285760 1. 信号概念 信号是进程在运行过程中,由自身产生或由进程外部发过来的消息(事件) ...

  3. CDH4.1基于Quorum-based Journaling的NameNode HA

    几个星期前, Cloudera发布了CDH 4.1最新的更新版本,这是第一个真正意义上的独立高可用性HDFS NameNode的hadoop版本,不依赖于特殊的硬件或外部软件.这篇文章从开发者的角度来 ...

  4. 桶排序-OC

    NSArray * b = @[@,@,@,@,@]; NSMutableArray *a = @[].mutableCopy; ; i<; i++) { a[i] = @; } for (NS ...

  5. ASP.NET MVC - 发布网站

    原文地址:http://www.w3school.com.cn/aspnet/mvc_publish.asp 学习如何在不使用 Visual Web Developer 的情况下发布 MVC 应用程序 ...

  6. 记录一个 关于 python 普通方法，静态方法和类方法 的介绍。@classmethod @staticmethod

    上班时间 只贴看到最厉害的答案 回头总结 http://stackoverflow.com/questions/12179271/python-classmethod-and-staticmethod ...

  7. 【多线程】JAVA多线程和并发基础面试问答（转载）

    JAVA多线程和并发基础面试问答 原文链接:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-ans ...

  8. AndroidStudio debug

    1. view as text

  9. leveldb

    [LevelDB] LevelDB is a fast key-value storage library that provides an ordered mapping from string k ...

  10. http://acm.hdu.edu.cn/showproblem.php?pid=2579

    #include<stdio.h> #include<string.h> #include<queue> #define N 110 int m, n, k, x1 ...