Skip to content

Instantly share code, notes, and snippets.

@ceelian
Last active October 29, 2015 22:02
Show Gist options
  • Save ceelian/4744fa31c2e7bb4023c8 to your computer and use it in GitHub Desktop.
Save ceelian/4744fa31c2e7bb4023c8 to your computer and use it in GitHub Desktop.
Accessing Methods Of AngularJS Directive

Accessing Methods Of AngularJS Directive

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.

License.

<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>
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);
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<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