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.
- 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);
}
};
}
- 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);
});
}
};
}
- 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);
}
};
}
- 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);
}
};
}
- 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);
}
};
}
- 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());
}
};
}
- Isolate Scope Expression Binding
THIS IS TO BE DONE!