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/
时间： 2024-08-08 01:25:30