Question

这里是＆＃39; plunker＆＃39;描述情况。

主页面（home.html）由四个＆lt; ui-view＆gt; s组成：图形，字段，模态和配置。
图＆lt; ui-view＆gt;用于图表部分。
字段＆lt; ui-view＆gt;根据用户点击的链接显示字段（fields.html和fields2.html）。
模态＆lt; ui-view＆gt;显示模态对话框。
configure ＆lt; ui-view＆gt;显示要在对话框中设置的设置列表。

我面临的问题是 - 如何保持 字段的状态 ＆lt; ui-view＆gt;用户在点击配置链接打开对话框之前已离开？

编辑：此外，我无法在点击对话框链接的对话框中显示设置（settings1.html，settings2.html，settings3.html）页面。这是routes.js的代码：

angular.module("myApp")
  .config(["$stateProvider", function($stateProvider) {
      $stateProvider
          .state("home", {
              url: "/",
              templateUrl: "home.html"
           })
           .state("home.dashboard", {
                views: {
                    "graph": {
                         templateUrl: "graph.html"
                     },
                     "fields": {
                         templateUrl: "fields.html"
                     }
                }
           })
          .state("home.moreFields", {
              views: {
                  "graph": {
                       templateUrl: "graph.html"
                   },
                   "fields": {
                       templateUrl: "fields2.html"
                   }
              }
          })
          .state("home.configure", {
              views: {
                  "graph": {
                       templateUrl: "graph.html"
                   },
                   "fields": {
                       // The templateUrl might be 'fields1.html' or 'fields2.html' depending upon    link the user clicked at the time when the dialog is opened.
                   },
                   "modal": {
                        templateUrl: "configure.html"
                   }
              }
          })
         .state("home.configure.settings1", {
             views: {
                 "graph": {},
                 "fields": {},
                 "configure": {
                     templateUrl: "settings1.html"
             }        
          }
      })
      .state("home.configure.settings2", {
           views: {
               "configure": {
                   templateUrl: "settings2.html"
                }
           }
      })
     .state("home.configure.settings3", {
         views: {
             "configure": {
                 templateUrl: "settings3.html"
             }
         }
      });
  }]);

Answer 1

查看UI-Router附加内容，尤其是Sticky States，以保留您的状态和范围。据我所知，它完全符合您的要求。

对于home.configure状态字段模板，您可以使用函数返回相应的模板，如官方UIRouter wiki

中所述

"fields": {
  templateUrl: function ($stateParams){
    return '/partials/field.' + $stateParams.clickedFieldNumber + '.html';
  }
}

模态对话框中的Angularjs ui-router状态

1 个答案: