如何设置 angular ui-路由器状态，以便主模板不会在每次状态更改时刷新？

Question

当用户在所有使用主模板的部分（仪表板和项目详细信息等）之间导航时，将重新加载整个模板。我只想看到嵌套的 "main" 和 "appbar" 视图发生变化。

在此示例应用中，'mainTemplate' 中的 link 不应重新加载。 css class 'view-fade-in' 在嵌入代码段中不起作用，但在 jsfiddle link 上有效。请注意当您从 Dashboard 转到 Project 时一切如何消失，反之亦然。唯一应该淡出的是应用栏和主要内容。

换句话说，我确实希望当用户从状态 'announcement' 进入状态 'dashboard' 时重新加载 mainTemplate，但是当用户从状态 'dashboard' 进入状态时'project.details' 由于两个状态都在使用 mainTemplate，因此不应重新加载。

您可以在此处fiddle：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

您要查找的是 "abstract" 个州。

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>'
          }
        }
      });

基本上是使用所有状态扩展的主模板创建了一个抽象的根状态

如何设置 angular ui-路由器状态，以便主模板不会在每次状态更改时刷新？

How do I setup angular ui-router states so that the main template does not refresh per state change?

javascript

angularjs

nested-views

ng-animate

angular-ui-router