Last active
August 29, 2015 14:03
-
-
Save shanecp/ce9ec5fa289373535424 to your computer and use it in GitHub Desktop.
Angular.js Directive Template
This file contains 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
// 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'); | |
}; | |
} | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment