AngularJS Web application development Cookbook

Isolate scope

Often, you will find that the inheritance of a directive's parent scope is undesirable somewhere in your application. To prevent inheritance and to create a blank slate scope for the directive, isolate scope is utilized.

Getting ready

Suppose that you begin with the following skeleton application:

(index.html - uncompiled) <div ng-app="myApp"> <div ng-controller="MainCtrl"> <my-directive> Stuff inside </my-directive> </div> <script type="text/ng-template" id="my-directive.html"> <div> <p>Directive template</p> <p>Scope from {{origin}}</p> <p>Overwritten? {{overwrite}}</p> </div> </script> </div> (app.js) angular.module('myApp', []) .controller('MainCtrl', function ($scope) { $scope.overwrite = false; $scope.origin = 'parent controller'; ...