You're reading from AngularJS Web application development Cookbook Over 90 hands-on recipes to architect performant applications and implement best practices in AngularJS

Product type Paperback

Published in Dec 2014

Publisher Packt

ISBN-13 9781783283354

Length 346 pages

Edition 1st Edition

Tools

AngularJS

Concepts

Front End Web Development

Author (1):

Matthew Frisbie

View More author details

Table of Contents (12) Chapters

Preface

1. Maximizing AngularJS Directives FREE CHAPTER

2. Expanding Your Toolkit with Filters and Service Types

3. AngularJS Animations

4. Sculpting and Organizing your Application

5. Working with the Scope and Model

6. Testing in AngularJS

7. Screaming Fast AngularJS

8. Promises

9. What's New in AngularJS 1.3

10. AngularJS Hacks

Index

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';
});

How to do it…

Assign an isolate scope to the directive with an empty object literal, as follows:

(app.js)

.directive('myDirective', function() {
  return {
    templateUrl: 'my-directive.html',
    replace: true,
    scope: {},
    link: function (scope) {
      scope.overwrite = !!scope.origin;
      scope.origin = 'link function';
    }
  };
});

This will compile into the following:

(index.html – compiled)

<div>
  <p>Directive template</p>
  <p>Scope from link function</p>
  <p>Overwritten? false</p>
</div>

Tip

JSFiddle: http://jsfiddle.net/msfrisbie/a2vmuhd3/

How it works…

The directive creates its own scope and performs the modifications on the scope instead of performing them inside the link function. The parent scope is unchanged and obscured from inside the directive's link function.

Authors (1)

Matthew Frisbie

Matt Frisbie is currently a software engineer at Google. He was the author of the Packt Publishing bestseller AngularJS Web Application Development Cookbook and also has published several video series through O'Reilly. He is active in the Angular community, giving presentations at meetups and doing webcasts.

See other products by Matthew Frisbie