Question

我正在使用嵌套视图处理我的UI-Router应用程序。我定义了一些这样的状态：

 $stateProvider

    .state('parent', {
      url: "/parent",
       views: {
         'area1': {templateUrl : 'parentView.html'},
         'area2' : ... // some other areas + template
       }
    })

    .state('parent.child1', {
      url: "/child1",
       views: {
          'area1' : {templateUrl : 'child1View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

    .state('parent.child2', {
      url: "/child2",
       views: {
          'area1' : {templateUrl : 'child2View.html'},
          'area2' : ...  // still some other areas, not changing 
       }
    })

使用应用程序时，我将主视图分为几个区域。在第一个区域，我使用特定的html文件。如果我点击某个链接，该应用会使用$state.go('myState')转到子状态。此时，URL已更改，但子视图未加载到页面中。

我在网站上搜索了答案，我发现这个问题来自另一个似乎在这里遇到同样问题的人：Angular Router - Url changes but view does not load

你知道我错过了什么吗？

抱歉英文不好

Answer 1

有a working plunker

index.html 很可能包含以下目标：

    data tab2;
      set your_table;
      periode = put(date,yymmn6.);
   run;

   proc sort data= tab2;
     by  periode date;
   run;

   data tab3;
    set tab2;
     by periode;
     if last.periode then output;
   run;

因此，如果父母和孩子都确实以这些为目标，我们需要使用绝对命名：

<body>
    <div ui-view="area1"></div>
    <div ui-view="area2"></div>
    ...

让我们观察一下doc：

View Names - Relative vs. Absolute Names

在幕后，为每个视图分配一个遵循 .state('parent.child1', { url: "/child1", views: { 'area1@' : {template : '<h2>child 1 area 1 </h2>'}, 'area2@' : {template : '<h2>child 1 area 2</h2>'}, } }) .state('parent.child2', { url: "/child2", views: { 'area1@' : {template : '<h2>child 2 area 1 </h2>'}, 'area2@' : {template : '<h2>child 2 area 2</h2>'}, } }) 方案的绝对名称，其中viewname是视图指令中使用的名称，州名是州的绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

viewname@statename

所以，我们的孩子需要使用1）查看目标名称2）分隔符@和3）状态名称（在我们的字符串空代表根目录）： .state('report',{ views: { 'filters@': { }, 'tabledata@': { }, 'graph@': { } } })

这些链接类似于$ state.go（）现在可以使用：

'area1@'

检查here

Angular UI-Router：URL已更改但未加载视图

1 个答案: