Configuring the Directive Scope
Directives share the scope with the parent by default. This is typically adequate for most needs. The biggest downside is that you might not want to include all the custom directive properties in the parent scope, especially if the parent scope is the root scope.
To solve that problem, you can define a separate scope for the directive using the scope property. The following sections describe how to add an inherited scope and an isolate scope.
Adding an Inherited Scope
The simplest method to add a scope to a directive is to create one that inherits from the parent scope. The advantage is that you have a scope separate from the parent to add additional values to, but the disadvantage is that the custom directives can still modify values in the parent scope.
To create an inherited scope for the custom directive, simply set the scope property of the directive to true. For example:
directive('myDirective', function() {
return {
scope: true
};
});
Adding an Isolate Scope
At times you might want to separate the scope inside a directive from the scope outside the directive. Doing so prevents the possibility of the directive changing values in the scope of the parent controller. The directive definition enables you to specify a scope property that creates an isolate scope. An isolate scope isolates the directive scope from the outer scope to prevent the directive from accessing the outer scope and the controller in the outer scope from altering the directive scope. For example, the following isolates the scope of the directive from the outside scope:
directive('myDirective', function() {
return {
scope: { },
templateUrl: '/myDirective.html'
};
});
Using this code, the directive has a completely empty isolate scope. However, you might want to still map some items in the outer scope to the directive’s inner scope. You can use the following prefixes to attribute names to make local scope variables available in the directive’s scope:
■ @: Binds a local scope string to the value of the DOM attribute. The value of the attribute will be available inside the directive scope.
■ =: Creates a bidirectional binding between the local scope property and the directive scope property.
■ &: Binds a function in the local scope to the directive scope.
If no attribute name follows the prefix, the name of the directive property is used. For example:
title: '@'
is the same as
title: '@title'
The following code shows how to implement each of the methods to map local values into a directive’s isolate scope:
angular.module('myApp', []).
controller('myController', function($scope) {
$scope.title="myApplication";
$scope.myFunc = function(){
console.log("out");
};
}).
directive('myDirective', function() {
return {
scope: {title: '=', newFunc:"&myFunc", info: '@'},
template: '<div ng-click="newFunc()">{{title}}: {{info}}</div>'
};
});
The following code shows how to define the directive in the AngularJS template to provide the necessary attributes to map the properties:
<div my-directive
my-func="myFunc()"
title="title"
info="SomeString"></div>