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. Prototype入门

    官网地址:http://prototypejs.org/ Prototype降低了客户端web编程的复杂性.为了解决现实存在的一些问题,Prototype对浏览器的脚本环境做了一些扩展,对原先笨拙的A ...

  2. PHP 解压zip文件的函数封装

    /** * zip文件解压 * * @param $zipFilePath zip文件的路径,可以不加zip文件后缀.如果其他类型的文件伪装成zip解压也会失败 * @param $directory ...

  3. Python 读取excel

    一.到python官网下载http://pypi.python.org/pypi/xlrd模块安装, sudo python setup.py install 二.使用介绍 1.导入模块 import ...

  4. EditText的几个小点

    1. EditText 由 TextView 继承而来 2. android中inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.这也大大的方便的操作.有时需要虚拟键盘 ...

  5. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  6. eclipse gradle 自动打包

    直接在eclipse项目中建立一个文件,文件名为build.gradle.其实还可以用eclipse再项目上面右击,export->Android->Generate Gradle bui ...

  7. ets dets

    相同点:ets和dets都提供“键—值”搜索表 不同点:ets驻留在内存,dets驻留在磁盘 特点:ets表和dets表可以被多个进程共享,因此通过这两个模块可以实现数据间的交换 一  ets表 实现 ...

  8. 【FFT】专题总结

    学了若干天终于学(bei)会了传说中的法法塔 感觉也没那么难用嘛 fft快速傅里叶变换 在大表课件上写就是解决高精乘的工具 其实很有理有据 fft就是用复数的折半引理优化两个多项式相乘的高端东西 他能 ...

  9. sprite常用操作

    ,锚点 锚点就是所有旋转,移动,缩放的参考点.cocos2-x中默认的锚点是中心点.锚点用比例来表示范围为0-,(,)点代表左下点,(,)代表右上点.设置的函数为setAnchorPoint(ccp( ...

  10. html5 canvas图片翻转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...