Accessing Methods Of AngularJS Directive

Accessing Methods Of AngularJS Directive.markdown

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.

index.html

<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>

script.js

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);
		}
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />