Directives has dependencies too, and you can use dependency injection to provide services for your directives to use.
bad: "If you Want" to "use <alert>" another controller or page, you had to modify the Alertservice. This might the break things.
<!DOCTYPE HTML><HTML><Head> <title>Egghead.io Tutorials</title> <Linkrel= "shortcut icon"href= "Favicon.ico"> <Linkhref= "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"rel= "stylesheet"> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></Script> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></Script> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></Script> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></Script> <Scriptsrc= "App.js"></Script></Head><BodyNg-app= "App"Ng-controller= "Mainctrl as main"> <Alerttype= "{{main. Alertservice.alerttype}} "ng-if= "Main." Alertservice.isshowalert ">{Main.} Alertservice.alertmessage}}</Alert> <ButtonNg-click= "Main.showalert ();">Something Failed</Button></Body></HTML>
Angular.module ("App", ["Ui.bootstrap"]). Controller (' Mainctrl ',functionMainctrl (alertservice) {varMainctrl = This; Mainctrl.alertservice=Alertservice; }). Service (' Alertservice ',functionAlertservice () {varAlertservice = {}; Alertservice.false=true; Alertservice.showalert=function() {Alertservice.alerttype= "Success"; Alertservice.alertmessage= "There is a message"; Alertservice.isshowalert=true; } returnAlertservice; });
good: Using Directive injected by the service. Then the <alert> are no longer bind with the controller anymore.
<!DOCTYPE HTML><HTML><Head> <title>Egghead.io Tutorials</title> <Linkrel= "shortcut icon"href= "Favicon.ico"> <Linkhref= "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"rel= "stylesheet"> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></Script> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></Script> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></Script> <Scriptsrc= "//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></Script> <Scriptsrc= "App.js"></Script></Head><BodyNg-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> - <ButtonNg-click= "Main.showalert ();">Something Failed</Button></Body></HTML>
Angular.module ("App", ["Ui.bootstrap"]). Service (' Alertservice ',functionAlertservice () {varAlertservice = {}; Alertservice.false=true; Alertservice.showalert=function() {Alertservice.alerttype= "Success"; Alertservice.alertmessage= "There is a message"; Alertservice.isshowalert=true; } returnAlertservice; }). 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) {varAlertctrl = This; Alertctrl.alertservice=Alertservice; }). controller (' Mainctrl ',function(alertservice) {varMain = 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