ngView

1. - directive in module ngRoute

Overview

ngViewis 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$routeservice.

Requires thengRoutemodule to be installed.

指令信息

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

用法

动画

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.

-Ifthe attributeisnotset,disable scrolling.-Ifthe attributeissetwithout value,enable scrolling.-Otherwiseenable scrolling onlyifthe`autoscroll`attribute value evaluatedasan expression yields a truthy value.

事件

• $viewContentLoaded

  Emitted every time the ngView content is reloaded.

  类型:

  emit

  目标:

  the current ngView scope

示例

ng-controller="MainCtrl as main">Choose:href="Book/Moby">Moby|href="Book/Moby/ch/1">Moby: Ch1|href="Book/Gatsby">Gatsby|href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4|href="Book/Scarlet">Scarlet Letter
class="view-animate-container">ng-viewclass="view-animate">

$location.path() = {{main.$location.path()}}

$route.current.templateUrl = {{main.$route.current.templateUrl}}

$route.current.params = {{main.$route.current.params}}

$routeParams = {{main.$routeParams}}

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

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

.view-animate-container{position:relative;height:100px!important;position:relative;background:white;border:1pxsolid 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:1pxsolid 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'});// 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;}]);

it('should load and compile correct template',Function(){element(by.linkText('Moby: Ch1')).click();varcontent=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/);});