In AngularJS, $scope.$new() is a powerful method used to create a new child scope. By default, the new scope will inherit properties from its parent scope. However, it can also be used to create an isolated scope, which does not inherit from the parent scope at all.
This guide will cover the working of $scope.$new(), how to create an isolated scope, and when to use it in AngularJS applications.
Step 1: Understanding $scope.$new()
The $scope.$new(isolate) function is used to create a new scope. It accepts a Boolean parameter:
false(default) → Creates a child scope that inherits from the parent scope (prototypal inheritance).true→ Creates a completely isolated scope (does not inherit from the parent).
Step 2: Creating a Child Scope (Non-Isolated) Using $scope.$new(false)
By default, $scope.$new(false) creates a child scope that inherits from its parent.
Example – Child Scope with Inheritance
HTML
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<title>Child Scope Example</title>
</head>
<body ng-controller="ParentCtrl">
<h2>Parent Message: {{ parentMessage }}</h2>
<div custom-directive></div>
<script src="app.js"></script>
</body>
</html>
JavaScript (app.js)
var app = angular.module('app', []);
app.controller('ParentCtrl', function($scope) {
$scope.parentMessage = "Hello from Parent!";
});
app.directive('customDirective', function() {
return {
restrict: 'A',
link: function(scope, element) {
var childScope = scope.$new(false); // Creates an inherited scope
console.log("Child Scope Parent Message:", childScope.parentMessage);
}
};
});
What Happens?
- The directive creates a new child scope that inherits
parentMessagefromParentCtrl. childScope.parentMessagewill still be"Hello from Parent!"because it inherits from the parent.- Changes in the parent scope reflect in the child scope, unless overridden.
Use $scope.$new(false) when you want a child scope that still inherits properties from the parent.
Step 3: Creating an Isolated Scope Using $scope.$new(true)
If you want a completely separate scope that does not inherit from the parent, use $scope.$new(true).
Example – Creating an Isolated Scope
HTML
<body ng-controller="ParentCtrl">
<h2>Parent Message: {{ parentMessage }}</h2>
<div custom-directive></div>
</body>
JavaScript
app.directive('customDirective', function() {
return {
restrict: 'A',
link: function(scope, element) {
var isolatedScope = scope.$new(true); // Creates an isolated scope
console.log("Isolated Scope Parent Message:", isolatedScope.parentMessage); // Undefined
// Define a new message inside the isolated scope
isolatedScope.newMessage = "This is an isolated scope!";
console.log("Isolated Scope New Message:", isolatedScope.newMessage);
}
};
});
What Happens?
- The directive creates an isolated scope, meaning it does not inherit from the parent scope.
isolatedScope.parentMessageis undefined because it doesn’t have access to the parent’s data.- New properties in the isolated scope do not affect the parent scope.
Use $scope.$new(true) when you want an independent scope that does not inherit parent properties.
Step 4: Isolated Scope in Directives vs. $scope.$new(true)
There is another way to create an isolated scope using directives.
Example – Isolated Scope in a Directive Using scope: {}
app.directive('customDirective', function() {
return {
restrict: 'A',
scope: {}, // This creates an isolated scope
template: '<p>Directive Message: {{ directiveMessage }}</p>',
link: function(scope) {
scope.directiveMessage = "This is an isolated scope in a directive!";
}
};
});
What’s the Difference?
| Method | Scope Behavior | Inheritance from Parent? |
|---|---|---|
$scope.$new(false) | Child scope (inherits from parent) | Yes |
$scope.$new(true) | Completely isolated scope | No |
scope: {} in directives | Isolated scope in a directive | No |
Use $scope.$new(true) when creating scopes dynamically. Use scope: {} when defining directives.
Step 5: When to Use $scope.$new(true)?
- Prevent Unintended Scope Pollution:
- If you modify the parent scope inside a directive unintentionally, use an isolated scope.
- Encapsulation in Directives:
- If a directive modifies data, it should not interfere with the parent scope.
- Reusable Components:
- When creating modular and reusable components that do not depend on the parent scope.
- Avoid Conflicts:
- If multiple directives share a parent scope, using an isolated scope ensures data integrity.
Conclusion
| Concept | Explanation |
|---|---|
$scope.$new(false) | Creates a child scope that inherits from the parent. |
$scope.$new(true) | Creates an isolated scope that does not inherit from the parent. |
| Use Case for Child Scope | When child controllers or directives should inherit properties from the parent. |
| Use Case for Isolated Scope | When a directive or component should not interfere with the parent scope. |
| Directive Alternative | Use scope: {} in directives instead of $scope.$new(true). |