您的位置：首页 > Web前端 > AngularJS

[AngularJS] Using Services in Angular Directives

2014-12-13 21:26 288 查看

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/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航