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

Example
HTML

    <div my-directive
         text="Hello {{ parentProperty2 }}!"
         attribute-for-one-way-bind="parentProperty1"
         attribute-for-two-way-bind="parentProperty2">
    </div>

Script

    angular.module("myApp",[])
            .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";
            });

Output

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

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

Gist
index.html

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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