angularjs - 在模态和 ui View 中运行 ui.router

Question

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

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

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

        },
        //parent:"index"
    })

实际上并不认为它会那么容易工作，但确实如此，问题是一旦加载，它就会重置 mainview 和 menuview(因为它是模式，这意味着背景变灰)。

我试图让 form-welcome 成为 index 的子元素(初始 View )，但是，这破坏了整个事情。 (索引看起来如下)

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

        },

    })

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

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

Answer 1

UI-router 用于更改应用程序状态，而不是将 View 嵌套在一起。为此，你有 angular#component。

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: abstract
stateIndex.stateA: mainview: /home.html
stateIndex.stateB: mainview: /information.html

那么问问你自己，menuview 会在未来的状态下改变为不同的模板吗？如果没有，将其作为一个组件。