Last active
August 29, 2015 14:00
-
-
Save bugspencer/11376141 to your computer and use it in GitHub Desktop.
ng-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
| connect.directive('<directiveName>', DirectiveNameFactory); | |
| DirectiveNameFactory.$inject = []; | |
| function DirectiveNameFactory(){ | |
| // === InjectingFunction === // | |
| // Logic is executed 0 or 1 times per app (depending on if directive is used). | |
| // Useful for bootstrap and global configuration | |
| var directiveDefinitionObject = { | |
| /////////////////////////////////////////////// | |
| // START OF DIRECTIVE DEFINITION | |
| /////////////////////////////////////////////// | |
| /************************************************************************************************************************** | |
| * priority | |
| ************************************************************************************************************************** | |
| * order higher better ;-) | |
| * @default 0 | |
| * @type {Int} | |
| */ | |
| // priority: 0, | |
| /************************************************************************************************************************** | |
| * terminal | |
| ************************************************************************************************************************** | |
| * this priorityLevel is the last | |
| * @default false | |
| * @type {Boolean} | |
| */ | |
| // terminal: false, | |
| /************************************************************************************************************************** | |
| * scope | |
| ************************************************************************************************************************** | |
| * is the scope definition | |
| * false: there will be no new scope | |
| * true: a new scope is created but just ones | |
| * multiple dircective definition on the | |
| * same element uses the same scope | |
| * {}: build a new isolated scope. the parent connection | |
| * is configured by this object list | |
| * {localName:'@myAttr'} ONE WAY STRING BINDING | |
| * from the DOM element attribute to the scope | |
| * by interpreted the attribute `my-attr` | |
| * as a sting an provied in the new scope | |
| * as `localName` | |
| * {localName:'=myAttr'} TWO WAY BINDING | |
| * interpreted as parent scope value and | |
| * one effects the other | |
| * {localName:'&myAttr'} ONE WAY FUNCTION WRAPPER | |
| * `my-attr` is interpreted in a function so | |
| * you can access functions on the parent scope | |
| * and there result will be provided in `localName` | |
| * @default false | |
| * @type {Boolean} | |
| */ | |
| // scope: false, | |
| /************************************************************************************************************************** | |
| * controller | |
| ************************************************************************************************************************** | |
| * CONTROLLER CONSTRUCTOR FUNCTION | |
| * is call BEFORE `preLink` | |
| * @type {Function} | |
| */ | |
| // controller: ['$scope','$element','$attrs','$transclude', | |
| /** | |
| * CONTROLLER CONSTRUCTOR FUNCTION | |
| * is call BEFORE `preLink` this works like all othe controller with | |
| * the depentency collection | |
| * `$scope`, `$element`, `$attrs` and `$transclude` are the ones with specific | |
| * context | |
| * | |
| * @param {Scope} $scope current scope associated with the element | |
| * @param {jQueryElement} $element current element | |
| * @param {Object} $attrs current attributes object for the element | |
| * @param {Function} $transclude function which holds the privies element content | |
| * $transclude([scope], cloneLinkingFn) | |
| */ | |
| // function($scope, $element, $attrs, $transclude){ | |
| // } | |
| // ], | |
| /************************************************************************************************************************** | |
| * controllerAs | |
| ************************************************************************************************************************** | |
| * controller alias name alias on the directive | |
| * e.g. if the controller comes out of a factory | |
| * @type {String} | |
| */ | |
| // controllerAs: '', | |
| /************************************************************************************************************************** | |
| * require | |
| ************************************************************************************************************************** | |
| * single or list of strings of require controllers | |
| * 'directiveName' : needs to be on this element (Throw an error if not found) | |
| * '?directiveName' : optional directive if not found, `null` is passed to the link function | |
| * '^directiveName' : needs to be found on this element or there parent elements (Throw an error if not found) | |
| * '?^directiveName' : same as `^` but passing `null` to the link function if not found | |
| * | |
| * @type {String|Array:String} | |
| */ | |
| // require: '', | |
| /************************************************************************************************************************** | |
| * restrict | |
| ************************************************************************************************************************** | |
| * to which kind of DOM pattern this directive is made for | |
| * 'E' : element name like `body`, `p`, ... (or HTML5 like `<campaign-monitor></campaign-monitor>`), | |
| * 'A' : attribute (default): `<div campaign-monitor="campaign.id()"></div>` | |
| * or more W3C `<div data-campaign-monitor="campaign.id()"></div>` | |
| * 'C' : class attribute `<div class="campaign-monitor: campaign.id();"></div>` | |
| * helpful if u r working with an old DOM structure or a template/theme | |
| * 'M' : HTML comment tag `<!-- directive: campaign-monitor campaign.id() -->` | |
| * this should not being used in production but it can be very helpful in the | |
| * developering/staging mode. HTML comments will be removed during the | |
| * build for productive (gulp) | |
| * this letters can be comined e.g. 'EC' element OR class | |
| * @type {String} | |
| */ | |
| // restrict: 'A', | |
| /************************************************************************************************************************** | |
| * template | |
| ************************************************************************************************************************** | |
| * HTML markup that may | |
| * - replace the contents of the directive's element (default) | |
| * - wrap the contents of the directive's element (if `transclude` is `true`) | |
| * it can be a String or function. the function is called with two arguemnts | |
| * `tElement` and `tAttrs` and must return a template or boolean false | |
| * function(_tElement, _tAttrs){ | |
| * return '<h1>'+_tAttrs.campaignMonitor+'</h1>'; | |
| * } | |
| * @type {String|Function} | |
| */ | |
| // template : '<h1>Dashboard</h1>', | |
| /************************************************************************************************************************** | |
| * templateUrl | |
| ************************************************************************************************************************** | |
| * takes an URL in a string or function with the same signature like `template` | |
| * @type {String} | |
| */ | |
| // templateUrl: '', | |
| /************************************************************************************************************************** | |
| * transclude | |
| ************************************************************************************************************************** | |
| * something stange and i still dont understand 100% | |
| * so fare: | |
| * what transclusion mean | |
| * - http://en.wikipedia.org/wiki/Transclusion | |
| * - http://de.wikipedia.org/wiki/Transklusion | |
| * | |
| * true : takes the content out of the directive and stores it for later | |
| * 'element' : transclude the whole element including any directives defined at lower priority | |
| * | |
| * | |
| * @type {Boolean|String} | |
| */ | |
| // transclude: false, | |
| /************************************************************************************************************************** | |
| * compile | |
| ************************************************************************************************************************** | |
| * Logic is executed once (1) for every instance of ui-jq in your original UNRENDERED template. | |
| * Scope is UNAVAILABLE as the templates are only being cached. | |
| * You CAN examine the DOM and cache information about what variables | |
| * or expressions will be used, but you cannot yet figure out their values. | |
| * Angular is caching the templates, now is a good time to inject new angular templates | |
| * as children or future siblings to automatically run.. | |
| * | |
| * for transforming the template | |
| * and if its used the return can be a `postLink` function or | |
| * an object with this posible options | |
| * { | |
| * pre : function preLink(){}, | |
| * post : function postLink(){} | |
| * } | |
| * @see `link` for linking function props | |
| * @param {jQueryElement} tElement template element | |
| * @param {Object} tAttrs to the directive given attributes | |
| * @return {Funtion|Object} | |
| */ | |
| // compile : function(tElement, tAttrs) {}, | |
| /************************************************************************************************************************** | |
| * link | |
| ************************************************************************************************************************** | |
| * LINKING FUNCTION | |
| * | |
| * Logic is executed once (1) for every RENDERED instance. | |
| * Once for each row in an ng-repeat when the row is created. | |
| * Note that ng-if or ng-switch may also affect if this is executed. | |
| * Scope IS available because controller logic has finished executing. | |
| * All variables and expression values can finally be determined. | |
| * Angular is rendering cached templates. It's too late to add templates for angular | |
| * to automatically run. If you MUST inject new templates, you must $compile them manually. | |
| * | |
| * only used if compile is `undefined` | |
| * | |
| * in this function design DOM updating/manipulating functions/rotines | |
| * and add DOM listener to notice the controller | |
| * the response is a function or an object | |
| * @see `compile` | |
| * | |
| * @param {Object} scope just use to watch on the scope for updates | |
| * @param {jQueryElement} iElement element | |
| * @param {Object} iAttrs element attributes | |
| * @param {[type]} controller controller of this dom element if one directive defineds one | |
| * @param {Function} transcludeFn privies element content | |
| * `transcludeFn([scope], cloneLinkingFn, futureParentElement)` | |
| * | |
| * @return {Function|Object} | |
| */ | |
| link : function postLink(scope, iElement, iAttrs, controller, transcludeFn) { } | |
| /////////////////////////////////////////////// | |
| // END OF DIRECTIVE DEFINITION | |
| /////////////////////////////////////////////// | |
| }; | |
| return directiveDefinitionObject; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment