AngularJS: API: ngRoute/directive/ngView

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.

指令信息

这个指令会创建新的作用域(scope)。
这个指令执行优先级为400.

用法

作为元素使用: (这个指令能用于自定义元素，但要注意IE限制)。
```
<ng-view
  [onload=""]
  [autoscroll=""]>
...
</ng-view>
```

作为属性使用:

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

作为CSS类使用:

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

动画

enter - animation is used to bring new content into the browser. leave - animation is used to animate existing content away.

The enter and leave animation occur concurrently.

点击这里了解更多关于涉及动画的步骤。

参数

参数类型详述

参数	类型	详述
onload (可选)	string	Expression to evaluate whenever the view updates.
autoscroll (可选)	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

(可选)

string

Expression to evaluate whenever the view updates.

autoscroll

(可选)

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.

事件

$viewContentLoaded

Emitted every time the ngView content is reloaded.

类型:

emit

目标:

the current ngView scope

示例

index.html

<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>

book.html

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

chapter.html

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

animations.css

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

.view-animate {
  padding:10px;}

.view-animate.ng-enter, .view-animate.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
  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%;}

script.js

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

      // configure html5 to get links working on jsfiddle
      $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.名称= "BookCtrl";
    this.params = $routeParams;
  }])
  .controller('ChapterCtrl', ['$routeParams', Function($routeParams) {
    this.名称= "ChapterCtrl";
    this.params = $routeParams;
  }]);

protractor.js

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

AngularJS: API: ngRoute/directive/ngView

ngView

Overview

指令信息

用法

动画

参数

事件

$viewContentLoaded

类型:

目标:

示例