【发布时间】：2017-02-14 01:12:41
【问题描述】：
当用户在所有使用主模板的部分（仪表板和项目详细信息等）之间导航时，会重新加载整个模板。我只想看到嵌套的“main”和“appbar”视图发生变化。
在此示例应用程序中，“mainTemplate”中的链接不应重新加载。 css 类“view-fade-in”在嵌入式 sn-p 中不起作用，但它在 jsfiddle 链接上。请注意，当您从 Dashboard 转到 Project 时，一切都会消失，反之亦然。唯一应该褪色的是应用栏和主要内容。
换句话说，我确实希望当用户从状态“公告”状态变为状态“仪表板”时重新加载 mainTemplate，但是当用户从状态“仪表板”状态变为状态“project.details”时，因为这两个状态正在使用 mainTemplate 它不应该重新加载。
你可以在这里摆弄：http://jsfiddle.net/webmandman/3wb8a46o/3/
(function() {
'use strict';
var mainTemplate = '<div class="mainTemplate"><a ui-sref="dashboard">Dashboard</a> - <a ui-sref="project.details">Project Details</a> - <a ui-sref="announcement">Announcement</a><div class="view-fade-in" ui-view="appbar"></div><div class="view-fade-in" ui-view="main"></div></div>';
var fullscreenTemplate = '<div class="fullscreenTemplate"><div class="view-fade-in" ui-view="main"></div></div>';
angular
.module('ExampleApp', ['ui.router','ngAnimate'])
.controller('exampleAppMainController', function() {})
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
function($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider
.state("dashboard", {
url: '/',
views: {
'@': {
template: mainTemplate
},
'appbar@dashboard': {
template: 'Dashboard App Bar Content GOES HERE'
},
'main@dashboard': {
template: 'Dashboard Main Content GOES HERE'
}
}
})
.state("project", {
views: {
'@': {
template: mainTemplate
},
'appbar@project': {
template: 'Project App Bar'
}
},
abstract: true
})
.state("project.details", {
url: '/project/:projectid/:typeid/:directoryid',
views: {
'main@project': {
template: 'Project Details'
}
},
params: {
typeid: {
squash: true,
value: null
},
directoryid: {
squash: true,
value: null
}
}
})
.state("announcement", {
url: '/announcement',
views: {
'@': {
template: fullscreenTemplate
},
'main@announcement': {
template: 'Announcement To Be Made! <a ui-sref="dashboard">Back to Dashboard</a>'
}
}
});
$urlRouterProvider.otherwise('/');
}
]);
})();/*** NG-VIEW Animation ******************************/
.body {margin:25px;color:white;}
.body a {color:black;}
.mainTemplate {background-color:hotpink;}
.fullscreenTemplate {background-color:darkorange;}
.view-fade-in.ng-enter {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
position: relative;
opacity: 0;
}
.view-fade-in.ng-enter.ng-enter-active {
opacity: 1;
}
.view-fade-in.ng-leave.ng-leave-active {
opacity: 1;
}
.view-fade-in.ng-leave {
opacity: 0;
}<!DOCTYPE html>
<html lang="en" class="no-js" ng-app="ExampleApp">
<head>
<title>Example App - Routing and Nested Views</title>
</head>
<body class="body" layout="column">
<div class="view-fade-in" layout="column" ui-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js"></script>
</body>
</html>【问题讨论】：
标签： javascript angularjs angular-ui-router ng-animate nested-views