Created
August 27, 2013 09:10
-
-
Save arnabdas/6351376 to your computer and use it in GitHub Desktop.
Isolated scope and other types in directives of Angular JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var myModule = angular.module('myModule', []) | |
.directive('myComponent', function () { | |
return { | |
restrict:'E', | |
scope:{ | |
/* NOTE: Normally I would set my attributes and bindings | |
to be the same name but I wanted to delineate between | |
parent and isolated scope. */ | |
isolatedAttributeFoo:'@attributeFoo', | |
isolatedBindingFoo:'=bindingFoo', | |
isolatedExpressionFoo:'&' | |
} | |
}; | |
}) | |
.controller('MyCtrl', ['$scope', function ($scope) { | |
$scope.foo = 'Hello!'; | |
$scope.updateFoo = function (newFoo) { | |
$scope.foo = newFoo; | |
} | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div ng-controller="MyCtrl"> | |
<h2>Parent Scope</h2> | |
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i> | |
<br><br> | |
<!-- attribute-foo binds to a DOM attribute which is always | |
a string. That is why we are wrapping it in curly braces so | |
that it can be interpolated. | |
--> | |
<my-component attribute-foo="{{foo}}" binding-foo="foo" | |
isolated-expression-foo="updateFoo(newFoo)" > | |
<h2>Attribute</h2> | |
<div> | |
<strong>get:</strong> {{isolatedAttributeFoo}} | |
</div> | |
<div> | |
<strong>set:</strong> <input ng-model="isolatedAttributeFoo"> | |
<i>// This does not update the parent scope.</i> | |
</div> | |
<h2>Binding</h2> | |
<div> | |
<strong>get:</strong> {{isolatedBindingFoo}} | |
</div> | |
<div> | |
<strong>set:</strong> <input ng-model="isolatedBindingFoo"> | |
<i>// This does update the parent scope.</i> | |
</div> | |
<h2>Expression</h2> | |
<div> | |
<input ng-model="isolatedFoo"> | |
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button> | |
<i>// And this calls a function on the parent scope.</i> | |
</div> | |
</my-component> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This Gist has been taken from: http://jsfiddle.net/maxisam/QrCXh/