Angularjs 在模式和ui视图中运行ui.router

因此，我不确定ui.router是否可以实现这一点，但我想我会添加一个漂亮的小模式，启动并说欢迎访问该站点，给用户一个输入一些细节的机会，等等

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

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

        },
        //parent:"index"
    })

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

我试图让FormWelcome成为index（初始视图）的子视图，但是，这破坏了整个过程。（索引如下所示）

我可以重新加载所有三个视图（mainview、menuview和formview），除了闪烁的屏幕之外，这还不错。但是有没有一种方法可以限制状态，这样它只改变formview，而不影响其他的。 原因是我想通过五个不同的屏幕更改formview，讨厌页面闪烁：）

---

在我看来，这应该是可能的，但我可能不理解它是如何工作的

我会尝试另一种方法，而不是UI路由器的“欢迎”模式部分。听起来它不应该是一个应用程序中的“状态”，你可以在那里导航到等等

---

我会在你的应用程序完成引导后，根据你的业务逻辑（例如，只显示一次）弹出这个欢迎模式（例如，在你的run（）方法中或在w/e逻辑之后，你必须启动你的应用程序）。

我认为实现你想要的最好方法是监听状态更改事件并启动模式。其思想是在打开第一个视图时启动欢迎模式，然后在localStorage或某个服务中设置变量（取决于您想要实现什么）。这里有一个例子

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

---

UI路由器用于更改应用程序状态，而不是将视图嵌套在一起。为了达到这个目的，你有一个角度分量

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

var-app=angular.module（'app'，[]）；
应用程序组件（“myModal”{
模板：“你好用户”，
控制器：“modalCtrl”
});
app.controller（'modalCtrl'，['$scope'，'modalService'，function（$scope，modalService）{
//保存服务中的显示状态（默认为false），这样您就不会每次用户访问主页时都弹出您的模式
$scope.isShowing=modalService.getShowStatus（）；
$scope.pressButton=函数（）{
$scope.isShowing=false；
modalService.setShowStatus（假）；
}
});

然后使用ui路由器，声明索引状态，其模板如下

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

ui路由器的功能是能够在每个不同的状态下用不同的模板替换ui视图

状态索引：摘要
stateIndex.stateA:mainview:/home.html
stateIndex.stateB:mainview:/information.html

---

所以问问你自己，menuview会在未来的状态中改变为不同的模板吗？如果不会，就把它变成一个组件。

为什么不试试$uibModal，ui引导的一部分

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

---

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

这就是您试图做的：为什么不尝试to将其放置在welcome窗体上，然后在该控制器内，转到

index

状态。您希望此模型仅在用户第一次或每次访问索引页面时才打开吗？我认为问题是我确实希望打开模式，但随后我需要能够使用模式执行多项操作，例如，我可能希望要显示欢迎，请输入一些详细信息，然后输入四条新闻。我想得越多，我就必须将模式连接到一个服务，因此我以当前运行的方式打开它，然后使用一个服务来更改元素。我目前正试图使用这个，看起来正是我想要的。如果我让它工作起来，这将获胜，因为这比任何其他解决方案都简单。这是一个完美的解决方案（对于我所需要的），它是如此简单，也许我自己也应该想到它，但简单、流畅、有力，它是一个赢家

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