1

我正试图围绕我将如何在下面的两个视图之间实现倾斜过渡。目前它只是替换了根中的 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>

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

谢谢。

4

1 回答 1

1

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

对于您的登录状态，我猜您想要这样做"header@app"而不是"@"（我知道，这很令人困惑，我正在尝试修复它）。

最后，如果您尝试为header视图的内容设置动画，您只需要一个ng-animate指向元素的指令。

希望有帮助。

于 2013-09-19T21:34:43.480 回答