Question

所以不确定ui.router是否可行，但我想我会添加一个漂亮的小模态启动并欢迎访问该网站，让用户有机会输入一些细节等等。

设置是基本视图有两个ui视图（mainview和menuview），我在模态中添加了formview。我可以让它工作，以便当模态打开时加载formview

        .state('form-welcome', {
        views: {
            formview:
                {
                    templateUrl: "/modals/form-welcome",
                },

        },
        //parent:"index"
    })

实际上并不认为它会那么简单，但确实如此，问题是它一加载就会重置mainview和menuview（因为它是一个模态，这意味着背景变灰）。

我试图使表单 - 欢迎一个索引的孩子（初始视图），然而，这打破了整个事情。（索引如下）

    .state('index', {
        url:"/int/index",
        views: {
            mainview: {
                templateUrl: "/pages/index",
                controller: "sketchMagController"
            },
            menuview: {templateUrl: "/pages/top-menu"},

        },

    })

我可以重新加载所有三个视图（mainview，menuview和formview），而不是一个闪烁的屏幕也不错。但有没有一种方法可以限制状态，所以它只会改变形式视图，而只留下其他的形式。原因是我想通过五个不同的屏幕改变formview，并讨厌闪烁的页面：）

在我看来它应该是可能的，但我可能会误解它是如何工作的

Answer 1

UI-router用于更改应用程序状态，而不是将视图嵌套在一起。为此，您有角度＃组件。

var app = angular.module('app', []);  
app.component('myModal', {
   template: '<div ng-show="isShowing">Hello User</div>',
   controller: 'modalCtrl'
});

app.controller('modalCtrl', ['$scope', 'modalService', function($scope, modalService) {
   //Save showing state in a service (default to false) so you don't popup your modal everytime user visit homepage
   $scope.isShowing = modalService.getShowStatus();
   $scope.pressButton = function() {
      $scope.isShowing = false;
      modalService.setShowStatus(false);
   }
});

然后使用ui-router声明索引状态，其模板如下

<-- INDEX.HTML -->
<my-modal></my-modal>
<div ui-view='mainview'></div>
<div ui-view='menuview'></div>

ui-router的强大功能是能够用不同的模板替换每个不同状态的 ui-views

stateIndex：摘要
      stateIndex.stateA：mainview：/home.html
      stateIndex.stateB：mainview：/information.html

那么问问自己，菜单视图会在未来的状态中改变为不同的模板吗？如果没有，请将其作为一个组件。

Answer 2

我会尝试不同的方法，而不是UI路由器的这个“欢迎”模态部分。这听起来不应该是应用程序中的“状态”，您可以在其中导航到等等。

我会根据您的业务逻辑（例如只显示一个），在您的应用程序完成引导后（例如在您的run（）方法中或在您需要启动应用程序之后）弹出此欢迎模式时间）。

Answer 3

为什么不试试$ uibModal，ui-bootstrap的一部分？ https://angular-ui.github.io/bootstrap/

听起来就像它需要的一切，它几乎都有自己的状态（包括它自己的视图和控制器），所以管道数据很容易。你甚至可以使用一个简单的result.then（function（）{}传递模态中捕获的数据。我们在工作中使用它，它不会重新加载它的状态。

您可能只想让它成为一个在控制器中自动运行的功能。如果你想限制它弹出的频率你甚至可以有一些逻辑来确定它何时弹出解决方案，将它传递给你的控制器并根据决心打开模态。

Answer 4

我认为实现你想要的最好的方法是听取状态改变的事件并解雇模态。我们的想法是，在打开第一个视图时触发欢迎模式，然后在localStorage或某个服务中设置变量（取决于您想要实现的内容）。这是一个例子

$rootScope.$on(['$stateChangeSuccess', function(){
   var welcomeModalFired = localStorage.get('welcomeModalFired');
   if(!welcomeModalFired) {
       //fire modal
       localStorage.set('welcomeModalFired', true);
   }
})

在模态和ui视图中运行ui.router

4 个答案: