ngView

- directive in module ngRoute

Overview

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Requires the ngRoute module to be installed.

Known Issues

If ngView is contained in an asynchronously loaded template (e.g. in another directive's templateUrl or in a template loaded using ngInclude), then you need to make sure that $route is instantiated in time to capture the initial $locationChangeStart event and load the appropriate view. One way to achieve this is to have it as a dependency in a .run block: myModule.run(['$route', function() {}]);

Directive Info

This directive creates new scope.
This directive executes at priority level 400.

Usage

as element: (This directive can be used as custom element, but be aware of IE restrictions).
```
<ng-view
  [onload="string"]
  [autoscroll="string"]>
...
</ng-view>
```

as attribute:

<ANY
  [onload="string"]
  [autoscroll="string"]>
...
</ANY>

as CSS class:

<ANY class="[onload: string;] [autoscroll: string;]"> ... </ANY>

Animations

Animation	Occurs
enter	when the new element is inserted to the DOM
leave	when the old element is removed from to the DOM

The enter and leave animation occur concurrently.

Click here to learn more about the steps involved in the animation.

Arguments

Param Type Details

Param	Type	Details
onload (optional)	string	Expression to evaluate whenever the view updates.
autoscroll (optional)	string	Whether `ngView` should call $anchorScroll to scroll the viewport after the view is updated. - If the attribute is not set, disable scrolling. - If the attribute is set without value, enable scrolling. - Otherwise enable scrolling only if the `autoscroll` attribute value evaluated as an expression yields a truthy value.

onload

(optional)

string

Expression to evaluate whenever the view updates.

autoscroll

(optional)

string

Whether ngView should call $anchorScroll to scroll the viewport after the view is updated.

- If the attribute is not set, disable scrolling.
- If the attribute is set without value, enable scrolling.
- Otherwise enable scrolling only if the `autoscroll` attribute value evaluated
  as an expression yields a truthy value.

Events

$viewContentLoaded

Emitted every time the ngView content is reloaded.

Type:

emit

Target:

the current ngView scope

Example

<div ng-controller="MainCtrl as main">
  Choose:
  <a href="Book/Moby">Moby</a> |
  <a href="Book/Moby/ch/1">Moby: Ch1</a> |
  <a href="Book/Gatsby">Gatsby</a> |
  <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
  <a href="Book/Scarlet">Scarlet Letter</a><br/>

  <div class="view-animate-container">
    <div ng-view class="view-animate"></div>
  </div>
  <hr />

  <pre>$location.path() = {{main.$location.path()}}</pre>
  <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
  <pre>$route.current.params = {{main.$route.current.params}}</pre>
  <pre>$routeParams = {{main.$routeParams}}</pre>
</div>

<div>
  controller: {{book.name}}<br />
  Book Id: {{book.params.bookId}}<br />
</div>

<div>
  controller: {{chapter.name}}<br />
  Book Id: {{chapter.params.bookId}}<br />
  Chapter Id: {{chapter.params.chapterId}}
</div>

.view-animate-container {
  position:relative;
  height:100px!important;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}

.view-animate {
  padding:10px;
}

.view-animate.ng-enter, .view-animate.ng-leave {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;

  display:block;
  width:100%;
  border-left:1px solid black;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding:10px;
}

.view-animate.ng-enter {
  left:100%;
}
.view-animate.ng-enter.ng-enter-active {
  left:0;
}
.view-animate.ng-leave.ng-leave-active {
  left:-100%;
}

angular.module('ngViewExample', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/Book/:bookId', {
        templateUrl: 'book.html',
        controller: 'BookCtrl',
        controllerAs: 'book'
      })
      .when('/Book/:bookId/ch/:chapterId', {
        templateUrl: 'chapter.html',
        controller: 'ChapterCtrl',
        controllerAs: 'chapter'
      });

    $locationProvider.html5Mode(true);
}])
.controller('MainCtrl', ['$route', '$routeParams', '$location',
  function($route, $routeParams, $location) {
    this.$route = $route;
    this.$location = $location;
    this.$routeParams = $routeParams;
}])
.controller('BookCtrl', ['$routeParams', function($routeParams) {
  this.name = "BookCtrl";
  this.params = $routeParams;
}])
.controller('ChapterCtrl', ['$routeParams', function($routeParams) {
  this.name = "ChapterCtrl";
  this.params = $routeParams;
}]);

it('should load and compile correct template', function() {
  element(by.linkText('Moby: Ch1')).click();
  var content = element(by.css('[ng-view]')).getText();
  expect(content).toMatch(/controller\: ChapterCtrl/);
  expect(content).toMatch(/Book Id\: Moby/);
  expect(content).toMatch(/Chapter Id\: 1/);

  element(by.partialLinkText('Scarlet')).click();

  content = element(by.css('[ng-view]')).getText();
  expect(content).toMatch(/controller\: BookCtrl/);
  expect(content).toMatch(/Book Id\: Scarlet/);
});

Load online demo