ng-directive

ng-directive-prototype.js

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