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. CSS3制作苹果风格键盘

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtMAAAEICAIAAAASh+8XAAAgAElEQVR4nOzdaXBU14E3/FPVBVUq5X

  2. JNI编程，C++调用Java

    本地代码中使用Java对象 通过使用合适的JNI函数,你可以创建Java对象,get.set 静态(static)和 实例(instance)的域,调用静态(static)和实例(instance)函 ...

  3. IOS自动布局

    参考资料 https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AutolayoutPG/Vi ...

  4. Xcode升级后插件失效的原理与修复办法

    转载:http://joeshang.github.io/2015/04/10/fix-xcode-upgrade-plugin-invalid/ Xcode 的插件大大丰富了 Xcode 的功能,而 ...

  5. [cocos2d-js]按钮整合成大图后打APK后不显示

    网页版本都能正常显示碎图和整合成大图的 手机版本不正常 var btnKick = cc.MenuItemImage.create( "#btn_kick.png", " ...

  6. miracast 协议wifi display

    看wifi direct display标准的地方: http://www.wi-fi.org/discover-wi-fi/specifications Miracast依赖的Wi-Fi技术项[②] ...

  7. 关于网站编码显示问题 效果是 访问 带有中文注释的sass文件出现编码报错。

    首先查看环境变量 export declare -x HOME="/home/piperck" declare -x LANG="en_US.UTF-8" de ...

  8. c++10 Seattle Clang error

    升级到C++Builder RAD 10 Settle 一些错误解决方法,使用LLVM  CLang编译器,BCC32C http://docwiki.embarcadero.com/RADStudi ...

  9. EntityFramwork6连接MySql错误

    EntityFramwork6连接MySql错误 使用EF6连接MySql产生Exception: ProHub.ssdl(2,2) : 错误 0152: MySql.Data.MySqlClient ...

  10. Ubuntu下gdb远程调试--warning: Could not load vsyscall page because no executable was specified解决方案

    1. 首先安装gdbserver apt-get install gdbserver 2. 编译-g 程序 gcc -g test_gdb.c -o test_gdb 源码如下: #include & ...