如何設置角度 ui-router 狀態，以便主模板不會在每次狀態更改時刷新？

Question

當用戶在都使用主模板的部分（儀表板和項目詳細信息等）之間導航時，整個模板會重新加載。 我只想看到嵌套的“main”和“appbar”視圖發生變化。

在此示例應用程序中，不應重新加載“mainTemplate”中的鏈接。 css 類“view-fade-in”在嵌入的代碼段中不起作用，但它在 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>

Answer 1

您要尋找的是“抽象”狀態。

https://github.com/angular-ui/ui-router/wiki/nested-states-&-nested-views#abstract-states

在這里你有更新的 jsfiddle： http : //jsfiddle.net/3wb8a46o/4/

主要變化在狀態提供者：

$stateProvider
      .state('root', {
         url: '',
         abstract: true,
         views: {
             '@': {
                 template: mainTemplate
              }
         }
      })
      .state("root.dashboard", {
        url: '/',
        views: {
          'appbar@root': {
            template: 'Dashboard App Bar Content GOES HERE.'
          },
          'main@root': {
            template: 'Dashboard Main Content GOES HERE'
          }

        }
      })
      .state("root.project", {
        views: {
          'appbar@root': {
            template: 'Project App Bar'
          }
        },
        abstract: true
      })
      .state("root.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="root.dashboard">Back to Dashboard</a>'
          }
        }
      });

基本上一個抽象的根狀態是用所有狀態擴展的主模板創建的

如何設置角度 ui-router 狀態，以便主模板不會在每次狀態更改時刷新？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-02-14 18:04:55

如何設置角度 ui-router 狀態，以便主模板不會在每次狀態更改時刷新？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-02-14 18:04:55

解決方案1
1 已采納 2017-02-14 18:04:55