首页 > 代码库 > [AngularJS] Using Services in Angular Directives
[AngularJS] Using Services in Angular Directives
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。