©
This document uses PHP Chinese website manual Release
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.
<ng-view
[onload=""]
[autoscroll=""]>
...
</ng-view><ANY
[onload=""]
[autoscroll=""]>
...
</ANY><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 |
Emitted every time the ngView content is reloaded.
<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;
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%;}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();
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/);});