An nice and easy way to access methods provided by a directive via the directive service. Based on AngularJS 1.4.7
A Pen by Christian Haintz on CodePen.
Last active
October 29, 2015 22:02
-
-
Save ceelian/4744fa31c2e7bb4023c8 to your computer and use it in GitHub Desktop.
Accessing Methods Of AngularJS Directive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div ng-app="app"> | |
| <div class="container" ng-controller="MainController as main"> | |
| <h1>Accessing methods of AngularJS directive</h1> | |
| <p>An easy example of a common way to call directive methods with a service. Addressing of directives is done by ID's which makes it possible to access the method exposed by the directives even outside of the controller scope.</p> | |
| <div class="row well"> | |
| <button ng-click="main.changeQuote('quote_1')" class="btn btn-primary col-sm-3 col-sm-offset-2"> | |
| Change quote for cncQuote Directive 1 | |
| </button> | |
| <button ng-click="main.changeQuote('quote_2')" class="btn btn-primary col-sm-3 col-sm-offset-2"> | |
| Change quote for cncQuote Directive 2 | |
| </button> | |
| </div> | |
| <div class="row well"> | |
| <h2>Quote Directive 1: <cnc-quote id="quote_1">No Quote</cnc-quote></h2> | |
| </div> | |
| <div class="row well"> | |
| <h2>Quote Directive 2: <cnc-quote id="quote_2">No Quote</cnc-quote></h2> | |
| </div> | |
| <p class="text-muted">Built on 10/2015 by Christian Haintz, Carrot & Company</p> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('app', []) | |
| .controller('MainController', MainController) | |
| .service('cncQuoteService', cncQuoteService) | |
| .directive('cncQuote', cncQuote) | |
| .controller('cncQuoteController', cncQuoteController); | |
| function MainController($log, cncQuoteService) { | |
| var self = this; | |
| //methods | |
| self.changeQuote = changeQuote; | |
| function changeQuote(quoteId) { | |
| $log.debug('MainController: Call directive service changeQuote %o', quoteId); | |
| cncQuoteService.changeQuote(quoteId); | |
| } | |
| } | |
| //Directive Service | |
| function cncQuoteService($log) { | |
| var self = this; | |
| //vars | |
| self.quoteDirectives = {}; | |
| //methods | |
| self.registerQuoteDirective = registerQuoteDirective; | |
| self.unregisterQuoteDirective = unregisterQuoteDirective; | |
| self.changeQuote = changeQuote; | |
| function changeQuote(quoteId) { | |
| $log.debug('cncQuoteService: changeQuote %o', quoteId); | |
| if (quoteId) { | |
| self.quoteDirectives[quoteId].changeQuote(); | |
| } | |
| } | |
| function registerQuoteDirective(id, scope) { | |
| self.quoteDirectives[id] = scope; | |
| } | |
| function unregisterQuoteDirective(id) { | |
| delete self.quoteDirectives[id]; | |
| } | |
| } | |
| //Directive | |
| function cncQuote($log) { | |
| var directive = { | |
| restrict: 'E', | |
| bindToController: true, | |
| transclude: true, | |
| link: linkFunction, | |
| controller: 'cncQuoteController', | |
| controllerAs: 'ctrl' | |
| }; | |
| return directive; | |
| function linkFunction(scope, el, attr, ctrl) { | |
| //Init the Directive Controller with el, and attr | |
| $log.debug('cncQuote: linkFunction: attr.id %o', attr.id); | |
| ctrl.init(el, attr); | |
| } | |
| } | |
| //Directive Controller | |
| function cncQuoteController($log, $scope, cncQuoteService) { | |
| var self = this; | |
| //vars | |
| self.el = null; | |
| self.attr = null; | |
| self.index = 0; | |
| self.quotes = [ | |
| 'This rocks!', | |
| 'I like it!', | |
| 'Angular rocks!', | |
| 'What a day!' | |
| ] | |
| //methods | |
| self.init = init; | |
| self.changeQuote = changeQuote; | |
| function init(el, attr) { | |
| self.el = el; | |
| self.attr = attr; | |
| $log.debug('cncQuoteController: Init and register id %o', attr.id); | |
| cncQuoteService.registerQuoteDirective(attr.id, self); | |
| //on ctrl destroy, also unregister from service | |
| $scope.$on("$destroy", function() { | |
| cncQuoteService.unregisterQuoteDirective(attr.id); | |
| }); | |
| } | |
| function changeQuote() { | |
| (self.index === self.quotes.length - 1) ? self.index = 0: self.index++; | |
| var newText = self.quotes[self.index]; | |
| $log.debug('cncQuoteController: Change quote for id %o with text %o', self.attr.id, newText); | |
| self.el.html(newText); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment