Angular.js Directive Template

directive.js

// this will look for an Attribute with 'em-checklist'
cix.directive('emChecklist', function() {
	
	return {
		// use Element, Attribute, Class or a combination
		restrict: 'A',

		// = both ways
		// @ attribute
		// & 
		scope: {
			emValue: '=' 	// get the em-value attribute content
		},

		// optional templates. Use a template or a template URL
		template: '<h1>something</h1>',
		templateUrl: '/filepath.html',

		// if you need to transclude any elements
		transclude: true,

		// replace the container HTML element. 
		// Must have a parent DIV in template for this to work
		replace: true, 

		// dependency injected. pass the dependencies into the function
		// use for cross-directive communication
		controller: function($scope) {	
			console.log('controller loaded');
			console.log($scope.emValue);
		},

		// link is used for DOM listening and interaction
		// only 3 arguments are passed to the function
		link: function(scope, elements, attrs) {
			element.click(function() {
				console.log('clicked');
			});
		},
		
		// use for DOM updates, manipulation
		// can return a link function within
		compile: function(tElement, tAttrs) {
			tElement.append(anotherElement);

			// return a linking function from the compile function
			// you can't use the 'link' function above
			return function(scope, element) {
				anotherElement.toggleClass('new-class');
			};
		}

	};

});