包含UI视图的模态窗口。

可以在模态窗口中使用Angular UI Router吗？我想要创建一个多步骤表单，通过三个步骤来填充用户信息。我以为这不会太凝固。我的想法是有一个模式，像这样：包含UI视图的模态窗口。

<div id="custom-modal"> 
    <div id="overlay"> 
     <a href ng-click="close()">Close</a> 
     <div class="content"> 

     <div ui-view></div> 

     </div> 
    </div> 
</div>

我的意图是建立一个路由，包含自己的模板过程的每个步骤。不幸的是，我一直无法找到办法做到这一点。有没有办法做到这一点？你能指点我一些例子吗？任何援助将是伟大的！

谢谢。

来源

2016-06-21 Aaron

你检查 https://scotch.io/tutorials/angularjs-multi-step -form-using-ui-router – abdoutelb

我已经完成了这项工作，你不需要在路由中添加每个模态。你只需要你的控制器和视图，你可以在该视图中添加一个按钮或一个条件来显示第一个模态。在该模式下，您可以显示部分表单，以填充用户的信息，并使用继续按钮关闭该模式，分配您拥有的数据，然后打开下一个模式以填充下一个数据，直到您获得到最后一个模式，最后一个按钮将保存/验证所有数据或发送给API。如果你需要一个更详细的例子让我知道，我可以帮你一个。 –

这看起来像我正在寻找的确切的东西。 – Aaron

ui-router，你设置这样的路由。

你还用你的用户界面视图，但在你的app.js您设置$ stateProvider

Router.$inject = ['$stateProvider', '$urlRouterProvider']; 
function Router($stateProvider, $urlRouterProvider){ 
    $stateProvider 
    .state('portfolio', { 
     url: '/', 
     templateUrl: 'portfolio.html' 
    }) 
    .state('login',{ 
     url: '/login', 
     templateUrl: 'login.html' 
    }) 
    .state('feed',{ 
     url: '/feed', 
     templateUrl: 'feed.html' 
    }); 
    $urlRouterProvider.otherwise('/'); 
}

来源

2016-06-21 20:43:20

包含UI视图的模态窗口。

回答

相关问题