Last active
June 5, 2017 06:35
-
-
Save karthickvkumar/11f7f5ddb4bc44e318e4a8aa63191567 to your computer and use it in GitHub Desktop.
Angular js isolated scopes
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> |
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; | |
} | |
}]); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment