ng-scope

Angular directive for extending scope.

• Modifying scope properties.
• Scope inheritance for ng-include, so it has access to parent template scope.
• Defining aliases for scope values.
• Augmenting scope with transient primitives, e.g. for ng-include.

Also available at ngModules.org.

Install

Via Bower:

$ bower install --save ng-scope

Then include ng-scope.js in your page.

And add it as a dependency of your module, e.g.:

var myApp = angular.module('myApp', ['ngScope']);

Examples

Wrapping

<div ng-scope="{name: 'Anders', job: 'developer'}">
  <!-- whatever you want here -->
  <!-- parent scope is also accessible -->
</div>

ng-include

Scope inheritance

With ng-include, we can pass the current scope with this:

<div ng-scope="this" ng-include src="'template'"></div>

Or, of course, we can pass any value:

<div ng-scope="{name: 'Anders', job: 'developer'}" ng-include src="'template'"></div>

<script type="text/ng-template" id="template">
  Hi, my name is {{name}}, and I work as a {{job}}!
  <!-- parent scope is also accessible -->
</script>

Aliasing

<div ng-scope="{name: fullName}">
  <!-- whatever you want here -->
</div>