angularjs_directive_attribute_explanation.md

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

1. Raw Attribute Strings

   <div my-directive="some string" another-param="another string"></div>
   
   var directiveFunction = function(){
   	return {
   		link: function(scope, element, attributes){
   
   			console.log(attributes.myDirective);
   			console.log(attributes.anotherParam);
   
   		}
   	};
   }

2. Observing Interpolated Strings (Also Watches for Changes)

   <div my-directive="{{some string}}" another-param="another string"></div>
   
   var directiveFunction = function(){
   	return {
   		link: function(scope, element, attributes){
   
   			attributes.$observe('myDirective', function(value){
   				console.log(value);
   			});
   
   			attributes.$observe('anotherParam', function(value){
   				console.log(value);
   			});
   
   		}
   	};
   }

3. Evaluating Objects and Object Expressions

   <div my-directive="{ param: 34, param2: 'cool' }" another-param="another string"></div>
   
   var directiveFunction = function(){
   	return {
   		link: function(scope, element, attributes){
   
   			var obj = scope.$eval(attributes.myDirective);
   			var string = scope.$eval(attributes.anotherParam);
   
   			console.log(obj);
   			console.log(string);
   
   		}
   	};
   }

4. Isolate Scope One Way String Binding

   <div my-directive="{{some.string}}" another-param="{{another.string}}"></div>
   
   var directiveFunction = function(){
   	return {
   		scope: {
   			myDirective: '@',
   			anotherParam: '@'
   		},
   		link: function(scope, element, attributes){
   
   			console.log(scope.myDirective);
   			console.log(scope.anotherParam);
   
   			//if the strings are not yet processed when this directive runs
   			//see: http://stackoverflow.com/a/14907826/582917
   			attributes.$observe('myDirective', function(value){
   				if(value){
   					console.log(value);
   				}
   			});
   			attributes.$observe('anotherParam', function(value){
   				if(value){
   					console.log(value);
   				}
   			});
   
   			//the $watch method also works
   			//see: http://stackoverflow.com/a/12976630/582917 & http://stackoverflow.com/a/17224886/582917
   			scope.$watch('myDirective', function(value){
   				if(value){
   					console.log(value);
   				}
   			});
   			
   			//multivalue value watching, only possible with $watch
   			//make sure to assign an object outside of the scope
   			//if you decide to return an object "return { }", a new object reference would be created
   			//inside the watch, and thus trigger another watch, resulting in digest errors
   			//MAKE SURE TO DO DEEP WATCH!
   			var multiValues = {};
   			scope.$watch(function(){
   				multiValues.myDirective = scope.myDirective;
   				multiValues.anotherParam = scope.anotherParam;
   				return multiValues;
   			}, function(value){
   				if(value){
   					console.log(value);
   				}
   			}, true);
   
   		}
   	};
   }

5. Isolate Scope Two Way Object Binding

   <div my-directive="modelObject" another-param="{ thisWill: 'result in digest errors' }"></div>
   
   var directiveFunction = function(){
   	return {
   		scope: {
   			myDirective: '=', //use =? for optionality
   			anotherParam: '='
   		},
   		link: function(scope, element, attributes){
   
   			//modelObject needs to be defined on the parent scope or you can use "=?" for optionality
   			console.log(scope.myDirective);
   			//this will result in digest errors: http://stackoverflow.com/q/13594732/582917
   			console.log(scope.anotherParam);
   
   			//the $watch method works when the model values have not yet been processed by the time this directive runs
   			scope.$watch('myDirective', function(value){
   				if(value){
   					console.log(value);
   				}
   			});
   
   		}
   	};
   }

6. Isolate Scope Object & Object Literal Expression Binding

   <div my-directive="{ param: 34, param2: 'cool' }" another-param="parentScopeObject"></div>
   
   var directiveFunction = function(){
   	return {
   		scope: {
   			myDirective: '&',
   			anotherParam: '&'
   		},
   		link: function(scope, element, attributes){
   
   			//this will return the actual object from the object expression!
   			console.log(scope.myDirective());
   			//this will return the actual object from the parent scope, if it exists of course!
   			//and no "parentScopeObject" is not a function, it's an object
   			console.log(scope.anotherParam());
   
   		}
   	};
   }

7. Isolate Scope Function Expression Binding

   <div my-directive="parentScopeFunction(funcParam, secondParam)"></div>
   
   var directiveFunction = function(){
   	return {
   		template: '<button ng-click="myDirective({funcParam: 'blah blah', secondParam: 'blah blah'})">It can be executed from inside the DOM too!</button>',
   		scope: {
   			myDirective: '&'
   		},
   		link: function(scope, element, attributes){
   			
   			//parameters passed into the bound function expression must be in the form of an object map
   			scope.myDirective(
   				{
   					funcParam: 'This is the value that is going to be passed in as the funcParam',
   					secondParam: 'This is another param!'
   				}
   			);
   
   		}
   	};
   }