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 (if you need to use functions or multi value watching)
   			//see: http://stackoverflow.com/a/12976630/582917 & http://stackoverflow.com/a/17224886/582917
   			scope.$watch('myDirective', function(value){
   				if(value){
   					console.log(value);
   				}
   			});
   			scope.$watch(function(){
   				return scope.myDirective;
   			}, function(value){
   				if(value){
   					console.log(value);
   				}
   			});
   
   		}
   	};
   }

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 Expression Binding

   <div my-directive="{ param: 34, param2: 'cool' }"></div>
   
   var directiveFunction = function(){
   	return {
   		scope: {
   			myDirective: '&'
   		},
   		link: function(scope, element, attributes){
   
   			//this will return the actual object from the object expression!
   			console.log(scope.myDirective());
   
   		}
   	};
   }

7. Isolate Scope Expression Binding

   THIS IS TO BE DONE!