1

当用户在所有使用主模板的部分（仪表板和项目详细信息等）之间导航时，会重新加载整个模板。我只想看到嵌套的“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>

4

1 回答 1

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

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

于 2017-02-14T18:04:55.363 回答