1
當用戶在所有使用主模板的部分（儀表板和項目詳細信息等）之間導航時，整個模板都會重新加載。我想只看到嵌套的「主」和「appbar」視圖改變。如何設置角度ui路由器狀態，使主模板不會刷新每個狀態更改？
在此示例應用程序中，'mainTemplate'中的鏈接不應該重新加載。 CSS class'view-fade-in'在嵌入式代碼片段中不起作用，但它在jsfiddle鏈接上。注意當你從儀表板轉到項目時，所有東西都會消失，反之亦然。唯一應該淡化的是應用欄和主要內容。
換句話說，我希望當用戶從狀態'公告'狀態'儀表板'，但當用戶從狀態「儀表板」轉到狀態'project.details'時，重新加載mainTemplate，因爲狀態正在使用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
},
'[email protected]': {
template: 'Dashboard App Bar Content GOES HERE'
},
'[email protected]': {
template: 'Dashboard Main Content GOES HERE'
}
}
})
.state("project", {
views: {
'@': {
template: mainTemplate
},
'[email protected]': {
template: 'Project App Bar'
}
},
abstract: true
})
.state("project.details", {
url: '/project/:projectid/:typeid/:directoryid',
views: {
'[email protected]': {
template: 'Project Details'
}
},
params: {
typeid: {
squash: true,
value: null
},
directoryid: {
squash: true,
value: null
}
}
})
.state("announcement", {
url: '/announcement',
views: {
'@': {
template: fullscreenTemplate
},
'[email protected]': {
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>
Canastro，我曾試過，但因爲我無法得到它的工作（錯誤：角度誤差可以不創建resolveAs字符串模板）我放棄了，來到這裏尋求幫助。非常感謝。這說得通。我相信我錯過了根抽象狀態下的url屬性。 – webmandman