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. java int和String类型之间的相互转换

    String --> int 第一种方法:int i = Integer.parseInt(s); 第二种方法:int i = Integer.valueOf(s).intValue(); 两种 ...

  2. java 代码如何生成 chm

    由于要把一个框架的东西打成 chm, 今天在网上找了几篇文章 http://blog.sina.com.cn/s/blog_5d31611a0100gqwp.html 李顺利 首先第一步,从eclip ...

  3. BITED-Windows8应用开发学习札记之四：如何在Win8 应用中实现语义缩放

    语意缩放的意义在于:创新的语意缩放外观,让你的应用随时展现信息可视化的力量.如图表般的Tile,随着数据的不同而变化,让你的页面更富节奏.而所谓的语意缩放就是通过上下文的跳转,帮助我们实现一种更快更便 ...

  4. PySpark调用自定义jar包

    在开发PySpark程序时通常会需要用到Java的对象,而PySpark本身也是建立在Java API之上,通过Py4j来创建JavaSparkContext. 这里有几点是需要注意的 1. Py4j ...

  5. 《学习OpenCV》练习题第四章第一题b&c

    #include <highgui.h> #include <cv.h> #pragma comment (lib,"opencv_calib3d231d.lib&q ...

  6. Masonry 实现输入框随键盘位置改变

    Github: https://github.com/saitjr/MasonryDemo 直接上代码: #import "ViewController4.h" #import & ...

  7. air开发中的requestedDisplayResolution 扫盲

    app.xml里面requestedDisplayResolution 取值可以为high/standard, 如果为high表示设备跟ios声明它需要使用高清屏(其实就是需要最大分辨率) 这里我猜测 ...

  8. virtualenv 和 virtualenvwrapper 实践

    virtualenv 首先来聊一下 virtualenv 是个什么鬼. 在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题:亦或者是在开发过程中不想让物理环境里充 ...

  9. mysql语句收藏

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  10. jQuery在updatepanel中使用造成内存泄露

    wijmo用户反馈了一个RadialGauge控件内存泄露的bug,采用chrome监控内存使用情况,发现明显的内存泄露,在前面的文章中我就发现了jQuery内存泄露的问题,这次再次发现此问题,自然就 ...