Binding Isolated Scopes in AngularJS

In AngularJS an isolated scope does not inherit properties from its parent scope, unlike a child scope. However, a property of an isolated scope in a directive can be bound to an attribute, which in turn can be bound to a property on the controller scope, making it possible for the isolated scope to access specified properties on the parent scope.

Type Prefix
Text @ The property on the isolated scope will take its value (always a string) from the parsed value of the specified attribute
One-way & Exposes a function on the controller scope to the isolated scope
Two-way = The specified property on the controller scope can be manipulated by changing the value of the property on the isolated scope


    <div my-directive
         text="Hello {{ parentProperty2 }}!"


            .directive("myDirective", function () {
                return {
                    restrict: "A",
                    scope: {
                        text: "@",                                       // Attribute name is optional if attribute has same
                        oneWayBoundProperty: "&attributeForOneWayBind",  // name as property on isolated scope.  (If you do
                        twoWayBoundProperty: "=attributeForTwoWayBind"   // specify the name, remember to camelCase it.)
                    link: function (scope) {
                        var tmp = scope.oneWayBoundProperty(); // A one-way bound property has to be called as a function
                        scope.twoWayBoundProperty = "Jenny";  // This will also change parentProperty2
                    template: 'My text is "{{ text }}" <br> My oneWayBoundProperty is "{{ oneWayBoundProperty() }}" <br> My twoWayBoundProperty is "{{ twoWayBoundProperty }}"'
            }).controller("myController", function ($scope) {
                $scope.parentProperty1 = "World";
                $scope.parentProperty2 = "User";


My text is "Hello Jenny!" 
My oneWayBoundProperty is "World" 
My twoWayBoundProperty is "Jenny"

AngularJS documentation on What are Scopes?
AngularJS documentation on Creating Custom Directives
AngularJS Directives, Using Isolated Scope with Attributes



About Jennifer Phillips Campbell

Software Developer and Medieval Historian
This entry was posted in AngularJS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s