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