Question

我试图围绕我将如何实现下面两个视图之间的倾斜过渡。目前它只是替换了根目录中的ui-view，而地图不再存在。

如果我的配置是：

angular.module("myApp", ["ui.router"])
.config([
   "$stateProvider, $urlRouterProvider",
   function($stateProvider, $urlRouterProvider){
      $stateProvider
         .state("app", {
            url: '',
            abstract: true,
            template: '<div ui-view="header"></div><div>Content</div>'
         })
         .state("app.map", {
             url: '/',
             views: {
                "header": {
                   template: '<button ng-click="menu()">Menu</button>',
                   controller: function($scope, $state) {
                      $scope.menu = function(){
                          $state.transitionTo("app.login");
                      };
                   }
                }
             }
         })
         .state("app.login", {
            url: '/login',
            views: {
                "@": {
                   template: '<div>Login<button ng-click="close()">Close</button></div>',
                   controller: function($scope, $state){
                      $scope.close = function(){
                         $state.transitionTo("app.map");
                      };
                   }
                }
            }
         });
   }
])

/index.html（包含所有必需的脚本和css）

<html ng-app="myApp">
   <body>
      <div id="page">
         <div ui-view></div>
      </div>
   </body>
</html>

有谁知道我会怎么做？我迷路了

感谢。

Answer 1

首先，如果您正在对视图进行绝对定位，则需要使用view@state语法（看起来您没有对header执行此操作）。

对于您的登录状态，我猜你想要"header@app"代替"@"（我知道，这很令人困惑，我正在努力修复它）。

最后，如果您尝试为header视图的内容设置动画，则只需要对该元素执行ng-animate指令。

希望有所帮助。

两个状态之间的角度ui.router倾斜过渡

1 个答案: