Question

这是我目前的代码：

let views = { '': 'app/content.html' };

.state('auto', {
    url: '/automated',
    redirectToChild: {
        state: 'auto.index'
    },
    views: view
})
.state('auto.index', {
    url :'',
    templateUrl: '/app/automated/automated.html'
})
.state('auto.visit', {
    url: '/visit',
    views: {
        '': {templateUrl: '/app/automated/visit.html'}
     }
})
.state('auto.visit.create', {
    url: '/create',
    views: {
        '': {templateUrl: '/app/automated/_form.html'}
    }
})

这是我的HTML：

// index.html
<ui-view></ui-view>


// content.html

 <div class="wrapper">
    <div class="container">
        <ui-view> </ui-view>
    </div>
</div>


// visit.html
<h5>Visit Page</h5>

// form.html
<h5>Visit Form</h5>

以下是问题：使用此代码时一切正常，但当我访问auto.visit.create时，它会显示visit.html而不是＆＃39; _form.html＆＃39;。

如何在不更改当前路线的情况下替换visit.html内容？

首先尝试：我将auto.visit.create州更改为auto.visit-create。这种方式运作正常，但我希望create是auto.visit

的孩子

第二次尝试：我在visit.html上添加了新的<ui-view></ui-view>，但当我转到create页面时，它会显示visit.html内容。

我已尝试遵循此http://angular-ui.github.io/ui-router/sample/#/代码。但它没有用。

Answer 1

您是如何访问嵌套视图的？你想要的符号完美无缺。您应该在所有父页面中包含<ui-view></ui-view>。

参见我创建的plunker作为例子;请务必使用单独的页面视图打开预览，以便您可以看到正在生成的网址

<小时/>

更新

我误解了你的问题，我道歉。以下是更新的代码和plunker，可以实现您的需求。我不相信有任何方法可以通过角度路由完成这个，所以我使用jquery来做到这一点。只有更改位于第一层和第二层

http://plnkr.co/edit/cxQpu6zS7fifnb0sGvGf?p=preview

Angular Code

(function() {
  angular.module("myApp", ["ui.router"]);

  angular.module("myApp")
    .config(["$stateProvider", "$urlRouterProvider", function($stateProvider,        $urlRouterProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
    .state("home", {
      url: "/",
      templateUrl: "blank.html"
    })
    .state("first", {
      url: "/first",
      templateUrl: "firstLayerPage.html"
    })
    .state("first.second", {
      url: "/second",
      templateUrl: "secondLayerPage.html"
    })
    .state("first.second.third1", {
      url: "/third_Page1",
      templateUrl: "thirdLayerPage1.html"
    })
    .state("first.second.third2", {
      url: "/third_Page2",
      templateUrl: "thirdLayerPage2.html"
    })
}]); // end of config
})(); //end of enclosure

索引

<body ng-app="myApp">
  <ul>
    <li><a ui-sref="home">home</a></li>
    <li><a ui-sref="first">First Layer</a> </li>
  </ul>
  <h1>Home Page</h1>
  <hr>
  <ui-view></ui-view>
</body>

第一层

  <p>this is the first layer of pages.</p>
  <ul>
      <li><a id="showSecondLayer" ui-sref="first.second">Second Layer</a>     </li>
  </ul>
   <hr>
   <ui-view></ui-view>

   <script type="text/javascript">
     $(document).ready(function(){
       $("#showSecondLayer").click(function(){
         $("#secondLayer").show();
       });
     });
   </script>

第二层

<div id="secondLayer">
  <p>This is the second layer</p>
  <ul>
    <li><a id="thirdP1" ui-sref="first.second.third1">Third Layer Page 1</a> </li>
    <li><a id="thirdP2" ui-sref="first.second.third2">Third Layer Page 2</a></li>
  </ul>
  <hr>
</div>
<ui-view></ui-view>

<script type="text/javascript">
  $(document).ready(function(){
    $("#thirdP1").click(function(){
      $("#secondLayer").hide();
    });
    $("#thirdP2").click(function(){
      $("#secondLayer").hide();
    });
  });      
</script>

第三层p1

<p>This is page one of the third level of children</p>
<hr>

第三层p2

<p>This is page two of the third level of children</p>
<hr>

Ui Router没有显示嵌套的子内容

1 个答案:

更新