Skip to content

Instantly share code, notes, and snippets.

@nxame

nxame/angularjs_directive_attribute_explanation.md

Forked from CMCDragonkai/angularjs_directive_attribute_explanation.md
Last active August 29, 2015 14:07
Download ZIP

Revisions

  1. @CMCDragonkai CMCDragonkai revised this gist Mar 23, 2014. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -117,6 +117,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    console.log(scope.stringParam); //literal string
    //IMPORTANT: if scope.some.string was not defined on the parent scope, then '@' interpolates it into an EMPTY string, it is still a STRING type
    //if the DOM attribute was not defined, scope.property would returned undefined

    //if the strings are not yet processed when this directive runs
    //this means they are interpolated, but perhaps the true value has not arrived, such as content from AJAX
    @@ -185,6 +186,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    console.log(scope.anotherParam);
    //IMPORTANT: if scope.modelObject was not defined on the parent scope, then '=' interpolates it into an UNDEFINED type, this works for child objects as well like scope.modelObject.childObject
    //if the DOM attribute was not defined, scope.property would returned undefined

    //the $watch method works when the model values have not yet been processed by the time this directive runs
    scope.$watch('myDirective', function(value){
    @@ -194,6 +196,8 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    });
    //$observe is useless here, as there is no interpolation whatsoever, the $watch will react to changes from both parent scope and current scope, furthermore any change to the value here, changes the parent value as well
    //=? is required if you want to assign values to the current isolated scope property, but the DOM attribute or parent scope property was never defined, checking if it exists or logging its current value won't result in an error

    }
    };
    @@ -238,6 +242,8 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    link: function(scope, element, attributes){
    //IMPORTANT: if scope.parentScopeFunction was not defined on the parent scope, then '&' interpolates it into a NOOP function, it is still a FUNCTION type
    //if the DOM attribute was not defined, scope.property would also still return a noop function

    //if it's defined as something other than a function, an error occurs!
    //parameters passed into the bound function expression must be in the form of an object map
  2. @CMCDragonkai CMCDragonkai revised this gist Mar 23, 2014. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -115,6 +115,8 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    console.log(scope.myDirective); //interpolated string
    console.log(scope.anotherParam); //interpolated string
    console.log(scope.stringParam); //literal string
    //IMPORTANT: if scope.some.string was not defined on the parent scope, then '@' interpolates it into an EMPTY string, it is still a STRING type

    //if the strings are not yet processed when this directive runs
    //this means they are interpolated, but perhaps the true value has not arrived, such as content from AJAX
    @@ -181,6 +183,8 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    //this will result in digest errors: http://stackoverflow.com/q/13594732/582917
    //so don't use object expressions with '='
    console.log(scope.anotherParam);
    //IMPORTANT: if scope.modelObject was not defined on the parent scope, then '=' interpolates it into an UNDEFINED type, this works for child objects as well like scope.modelObject.childObject

    //the $watch method works when the model values have not yet been processed by the time this directive runs
    scope.$watch('myDirective', function(value){
    @@ -232,6 +236,9 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    myDirective: '&'
    },
    link: function(scope, element, attributes){
    //IMPORTANT: if scope.parentScopeFunction was not defined on the parent scope, then '&' interpolates it into a NOOP function, it is still a FUNCTION type
    //if it's defined as something other than a function, an error occurs!
    //parameters passed into the bound function expression must be in the form of an object map
    scope.myDirective(
  3. @CMCDragonkai CMCDragonkai revised this gist Mar 23, 2014. 1 changed file with 18 additions and 6 deletions.
    24 changes: 18 additions & 6 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -29,6 +29,9 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    var directiveFunction = function(){
    return {
    link: function(scope, element, attributes){
    console.log(attributes.myDirective); //literal string "{{some string}}", no interpolation
    console.log(attributes.anotherParam); //literally "another string"

    attributes.$observe('myDirective', function(value){
    console.log(value);
    @@ -52,6 +55,8 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    return {
    link: function(scope, element, attributes){
    console.log(attributes.anotherParam); //literally "modelObject.obj"
    //modelObject is a scope property of the parent/current scope
    scope.$watch(attributes.myDirective, function(value){
    console.log(value);
    @@ -62,7 +67,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    console.log(value);
    });
    //if you tried to use $observe, you would get the literal expression "modelObject" and "modelObject.obj"
    //if you tried to use $observe, you would get the literal expression "modelObject" and "modelObject.obj", because there's nothing to interpolate

    }
    };
    @@ -106,11 +111,13 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    },
    link: function(scope, element, attributes){

    console.log(scope.myDirective);
    console.log(scope.anotherParam);
    console.log(scope.stringParam); //literal string, go ahead an use it
    //the '@' binding automatically interpolates the "{{}}" if they exist in the attributes
    console.log(scope.myDirective); //interpolated string
    console.log(scope.anotherParam); //interpolated string
    console.log(scope.stringParam); //literal string

    //if the strings are not yet processed when this directive runs
    //this means they are interpolated, but perhaps the true value has not arrived, such as content from AJAX
    //see: http://stackoverflow.com/a/14907826/582917
    attributes.$observe('myDirective', function(value){
    if(value){
    @@ -125,13 +132,16 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    //the $watch method also works because the '@' binding already does the interpolation
    //see: http://stackoverflow.com/a/12976630/582917 & http://stackoverflow.com/a/17224886/582917
    //this only works because it's in an isolate scope
    //this only works because it's in an isolate scope, therefore myDirective is part of the scope
    scope.$watch('myDirective', function(value){
    if(value){
    console.log(value);
    }
    });
    //the difference between $observe and $watch in this context, is that $observe reruns the interpolation (from the literal attribute value) and watches the value change, whereas the $watch relies on the '@' interpolation and parent binding and simply watches the value change in this current isolated scope
    //this means if want to react to the value change coming from this directive, you'll need to use $watch, otherwise if you only want to react to parent changes, you may use $observe
    //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
    @@ -167,7 +177,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    link: function(scope, element, attributes){

    //modelObject needs to be defined on the parent scope or you can use "=?" for optionality
    console.log(scope.myDirective);
    console.log(scope.myDirective); //this will be the parent/current scope's value, it's not the literal string
    //this will result in digest errors: http://stackoverflow.com/q/13594732/582917
    //so don't use object expressions with '='
    console.log(scope.anotherParam);
    @@ -178,6 +188,8 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    console.log(value);
    }
    });
    //$observe is useless here, as there is no interpolation whatsoever, the $watch will react to changes from both parent scope and current scope, furthermore any change to the value here, changes the parent value as well

    }
    };
  4. @CMCDragonkai CMCDragonkai revised this gist Mar 23, 2014. 1 changed file with 41 additions and 8 deletions.
    49 changes: 41 additions & 8 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,33 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    3. Evaluating Objects and Object Expressions
    3. Observing Expression Strings (Also watches for changes)

    ```javascript
    <div my-directive="modelObject" another-param="modelObject.obj"></div>

    var directiveFunction = function(){
    return {
    link: function(scope, element, attributes){
    //modelObject is a scope property of the parent/current scope
    scope.$watch(attributes.myDirective, function(value){
    console.log(value);
    });
    //modelObject.obj is also a scope property of the parent/current scope
    scope.$watch(attributes.anotherParam, function (value){
    console.log(value);
    });
    //if you tried to use $observe, you would get the literal expression "modelObject" and "modelObject.obj"

    }
    };
    }
    ```

    4. Evaluating Object Expressions

    ```javascript
    <div my-directive="{ param: 34, param2: 'cool' }" another-param="another string"></div>
    @@ -52,7 +78,10 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    return {
    link: function(scope, element, attributes){

    //this is designed for directive configuration if there's a alot of configuration parameters
    //one can combine this with interpolation, if the configuration is a JSON string
    var obj = scope.$eval(attributes.myDirective);
    //can also fallback as a string
    var string = scope.$eval(attributes.anotherParam);

    console.log(obj);
    @@ -63,21 +92,23 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    4. Isolate Scope One Way String Binding
    5. Isolate Scope One Way String Binding (Parent changes affect child, child changes does not affect parent)

    ```javascript
    <div my-directive="{{some.string}}" another-param="{{another.string}}"></div>
    <div my-directive="{{some.string}}" another-param="{{another.string}}" string-param="somestring"></div>

    var directiveFunction = function(){
    return {
    scope: {
    myDirective: '@',
    anotherParam: '@'
    anotherParam: '@',
    stringParam: '@'
    },
    link: function(scope, element, attributes){

    console.log(scope.myDirective);
    console.log(scope.anotherParam);
    console.log(scope.stringParam); //literal string, go ahead an use it

    //if the strings are not yet processed when this directive runs
    //see: http://stackoverflow.com/a/14907826/582917
    @@ -94,6 +125,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    //the $watch method also works because the '@' binding already does the interpolation
    //see: http://stackoverflow.com/a/12976630/582917 & http://stackoverflow.com/a/17224886/582917
    //this only works because it's in an isolate scope
    scope.$watch('myDirective', function(value){
    if(value){
    console.log(value);
    @@ -121,7 +153,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    5. Isolate Scope Two Way Object Binding
    6. Isolate Scope Two Way Object Binding (Parent chnages affect child and child changes affect parent)

    ```javascript
    <div my-directive="modelObject" another-param="{ thisWill: 'result in digest errors' }"></div>
    @@ -137,6 +169,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    //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
    //so don't use object expressions with '='
    console.log(scope.anotherParam);

    //the $watch method works when the model values have not yet been processed by the time this directive runs
    @@ -151,7 +184,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    6. Isolate Scope Object & Object Literal Expression Binding
    7. Isolate Scope Object & Object Literal Expression Binding

    ```javascript
    <div my-directive="{ param: 34, param2: 'cool' }" another-param="parentScopeObject"></div>
    @@ -175,7 +208,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    7. Isolate Scope Function Expression Binding
    8. Isolate Scope Function Expression Binding

    ```javascript
    <div my-directive="parentScopeFunction(funcParam, secondParam)"></div>
    @@ -201,7 +234,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    8. Non-Isolate Scope Function Expression Binding
    9. Non-Isolate Scope Function Expression Binding

    ```javascript
    <div my-directive="parentScopeFunction(funcParam)" another-func="parentScopeFunction2()"></div>
  5. @CMCDragonkai CMCDragonkai revised this gist Dec 21, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -92,7 +92,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    });

    //the $watch method also works
    //the $watch method also works because the '@' binding already does the interpolation
    //see: http://stackoverflow.com/a/12976630/582917 & http://stackoverflow.com/a/17224886/582917
    scope.$watch('myDirective', function(value){
    if(value){
  6. @CMCDragonkai CMCDragonkai revised this gist Sep 5, 2013. 1 changed file with 10 additions and 9 deletions.
    19 changes: 10 additions & 9 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -204,26 +204,27 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    8. Non-Isolate Scope Function Expression Binding

    ```javascript
    <div my-directive="parentScopeFunction(funcParam, secondParam)"></div>
    <div my-directive="parentScopeFunction(funcParam)" another-func="parentScopeFunction2()"></div>

    var directiveFunction = function(){
    var directiveFunction = function($parse){
    return {
    link: function(scope, element, attributes){

    //see this:
    //http://stackoverflow.com/questions/17583004/call-an-angularjs-controller-function-from-a-directive-without-isolated-scope
    //http://stackoverflow.com/questions/14858682/angularjs-directive-with-isolate-scope-do-i-really-have-to-call-parent-everyw
    //http://stackoverflow.com/a/16135820/582917
    //apply and eval
    scope.$apply(function() {
    scope.$eval(attributes.myDirective({funcParam : 'blah blah', secondParam: 'blah blah blah'}));
    scope.$eval(attributes.anotherFunc);
    });

    scope.$apply(function(s){
    s.myDirective({funcParam : 'blah blah', secondParam: 'blah blah blah'});
    });

    scope.$apply(attributes.myDirective({funcParam : 'blah blah', secondParam: 'blah blah blah'}));
    //apply only
    scope.$apply(attributes.anotherFunc);
    //$parse method, this allows parameters to be passed
    var invoker = $parse(attributes.myDirective);
    invoker(scope, {funcParam: 'example value'});

    }
    };
  7. @CMCDragonkai CMCDragonkai revised this gist Sep 4, 2013. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -210,7 +210,10 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    return {
    link: function(scope, element, attributes){

    //see this: http://stackoverflow.com/questions/17583004/call-an-angularjs-controller-function-from-a-directive-without-isolated-scope
    //see this:
    //http://stackoverflow.com/questions/17583004/call-an-angularjs-controller-function-from-a-directive-without-isolated-scope
    //http://stackoverflow.com/questions/14858682/angularjs-directive-with-isolate-scope-do-i-really-have-to-call-parent-everyw
    //http://stackoverflow.com/a/16135820/582917
    scope.$apply(function() {
    scope.$eval(attributes.myDirective({funcParam : 'blah blah', secondParam: 'blah blah blah'}));
  8. @CMCDragonkai CMCDragonkai revised this gist Sep 4, 2013. 1 changed file with 26 additions and 0 deletions.
    26 changes: 26 additions & 0 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -199,4 +199,30 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    };
    }
    ```

    8. Non-Isolate Scope Function Expression Binding

    ```javascript
    <div my-directive="parentScopeFunction(funcParam, secondParam)"></div>

    var directiveFunction = function(){
    return {
    link: function(scope, element, attributes){

    //see this: http://stackoverflow.com/questions/17583004/call-an-angularjs-controller-function-from-a-directive-without-isolated-scope
    scope.$apply(function() {
    scope.$eval(attributes.myDirective({funcParam : 'blah blah', secondParam: 'blah blah blah'}));
    });

    scope.$apply(function(s){
    s.myDirective({funcParam : 'blah blah', secondParam: 'blah blah blah'});
    });

    scope.$apply(attributes.myDirective({funcParam : 'blah blah', secondParam: 'blah blah blah'}));

    }
    };
    }
    ```
  9. @CMCDragonkai CMCDragonkai revised this gist Sep 3, 2013. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -99,10 +99,12 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    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;
    @@ -112,7 +114,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    if(value){
    console.log(value);
    }
    });
    }, true);

    }
    };
  10. @CMCDragonkai CMCDragonkai revised this gist Aug 22, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -149,7 +149,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    6. Isolate Scope Object Expression Binding
    6. Isolate Scope Object & Object Literal Expression Binding

    ```javascript
    <div my-directive="{ param: 34, param2: 'cool' }" another-param="parentScopeObject"></div>
  11. @CMCDragonkai CMCDragonkai revised this gist Aug 22, 2013. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -152,17 +152,21 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    6. Isolate Scope Object Expression Binding

    ```javascript
    <div my-directive="{ param: 34, param2: 'cool' }"></div>
    <div my-directive="{ param: 34, param2: 'cool' }" another-param="parentScopeObject"></div>

    var directiveFunction = function(){
    return {
    scope: {
    myDirective: '&'
    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());

    }
    };
  12. @CMCDragonkai CMCDragonkai revised this gist Aug 22, 2013. 1 changed file with 24 additions and 2 deletions.
    26 changes: 24 additions & 2 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -169,6 +169,28 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    7. Isolate Scope Expression Binding
    7. Isolate Scope Function Expression Binding

    THIS IS TO BE DONE!
    ```javascript
    <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!'
    }
    );

    }
    };
    }
    ```
  13. @CMCDragonkai CMCDragonkai revised this gist Aug 21, 2013. 1 changed file with 9 additions and 2 deletions.
    11 changes: 9 additions & 2 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -92,15 +92,22 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    });

    //the $watch method also works (if you need to use functions or multi value watching)
    //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
    var multiValues = {};
    scope.$watch(function(){
    return scope.myDirective;
    multiValues.myDirective = scope.myDirective;
    multiValues.anotherParam = scope.anotherParam;
    return multiValues;
    }, function(value){
    if(value){
    console.log(value);
  14. @CMCDragonkai CMCDragonkai revised this gist Aug 21, 2013. 1 changed file with 37 additions and 2 deletions.
    39 changes: 37 additions & 2 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -66,7 +66,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    4. Isolate Scope One Way String Binding

    ```javascript
    <div my-directive="some string" another-param="another string"></div>
    <div my-directive="{{some.string}}" another-param="{{another.string}}"></div>

    var directiveFunction = function(){
    return {
    @@ -78,6 +78,34 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

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

    }
    };
    @@ -99,8 +127,15 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

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

    }
    };
  15. @CMCDragonkai CMCDragonkai revised this gist Aug 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so
    }
    ```

    2. Observing Interpolated Strings
    2. Observing Interpolated Strings (Also Watches for Changes)

    ```javascript
    <div my-directive="{{some string}}" another-param="another string"></div>
  16. @CMCDragonkai CMCDragonkai revised this gist Aug 20, 2013. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    2. Observing Interpolated Strings

    ```
    ```javascript
    <div my-directive="{{some string}}" another-param="another string"></div>

    var directiveFunction = function(){
    @@ -45,7 +45,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    3. Evaluating Objects and Object Expressions

    ```
    ```javascript
    <div my-directive="{ param: 34, param2: 'cool' }" another-param="another string"></div>

    var directiveFunction = function(){
    @@ -65,7 +65,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    4. Isolate Scope One Way String Binding

    ```
    ```javascript
    <div my-directive="some string" another-param="another string"></div>

    var directiveFunction = function(){
    @@ -86,7 +86,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    5. Isolate Scope Two Way Object Binding

    ```
    ```javascript
    <div my-directive="modelObject" another-param="{ thisWill: 'result in digest errors' }"></div>

    var directiveFunction = function(){
    @@ -109,7 +109,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    6. Isolate Scope Object Expression Binding

    ```
    ```javascript
    <div my-directive="{ param: 34, param2: 'cool' }"></div>

    var directiveFunction = function(){
  17. @CMCDragonkai CMCDragonkai revised this gist Aug 20, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    1. Raw Attribute Strings

    ```
    ```javascript
    <div my-directive="some string" another-param="another string"></div>

    var directiveFunction = function(){
  18. @CMCDragonkai CMCDragonkai revised this gist Aug 20, 2013. 1 changed file with 92 additions and 92 deletions.
    184 changes: 92 additions & 92 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,110 +23,110 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

    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);
    });
    }
    };
    }
    ```
    ```
    <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);
    }
    };
    }
    ```
    ```
    <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);
    }
    };
    }
    ```
    ```
    <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);
    }
    };
    }
    ```
    ```
    <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());
    }
    };
    }
    ```
    ```
    <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!
    THIS IS TO BE DONE!
  19. @CMCDragonkai CMCDragonkai revised this gist Aug 20, 2013. 1 changed file with 14 additions and 14 deletions.
    28 changes: 14 additions & 14 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,20 +6,20 @@ The first 3 can be used whether scope is true or false. This is still a WIP, so

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

  20. @CMCDragonkai CMCDragonkai created this gist Aug 20, 2013.
    132 changes: 132 additions & 0 deletions angularjs_directive_attribute_explanation.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,132 @@
    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!