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. C#语言基础01

    Console.WriteLine("hello"); Console.ReadKey();// 按一个按键继续执行 string s=Console.ReadLine();//用 ...

  2. c# webbrowser获取滚动条最大值

    int HeightMax = 0; int WidthMax =0; HeightMax = webBrowser1.Document.Body.ScrollRectangle.Height-web ...

  3. jszs 枚举算法

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

  4. Spark的任务处理流程

    持续推送....

  5. JQuery与GridView控件结合示例

    JQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1. ...

  6. UVa11997K Smallest Sums（优先队列）

    K Smallest Sums You're given k arrays, each array has k integers. There are kk ways to pick exactly ...

  7. xib上拖拽scrollview的自动布局方法

    http://www.cocoachina.com/ios/20150104/10810.html

  8. git 安装与使用场景

    1. 安装 yum install git #自动安装依赖 centos sudo apt-get install git #ubutu http://msysgit.github.io/ #wind ...

  9. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  10. Form实现主从块金额汇总

    1.FORM使用app_calculate.running_total汇总行金额,行上有编码重复验证. 情况一:当录入多个编码重复的行并保存时,报错,清除一个重复行再保存(头行金额一致),报错&quo ...