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

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

		}
	};
}

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/questions/13594732/maxing-out-on-digest-iterations
			console.log(scope.anotherParam);

		}
	};
}

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!