当孩子状态改变时重新加载控制器 - Angular UI路由器

我是Angular UI路由器的新手，并且尝试使用嵌套视图创建应用程序。当孩子状态改变时重新加载控制器 - Angular UI路由器

我有一个index.html托管'标题'状态和'内容'状态。在内容状态中，我有两个代表全局视图和子视图的导航栏。当用户打开应用程序时，全局视图应默认打开。但是，目前，无论何时运行应用程序，全局视图控制器和子视图控制器都会一起执行（两个视图都会一起加载）。

我所希望的是，只有全局控制器应该首先被执行，然后当用户点击子视图时，其控制器应该被执行。在此之后，无论用户何时在两个视图之间切换，控制器都应重新加载。

我一直在阅读谷歌和这里，但无法找到所需的解决方案。请让我知道如果这是可能的使用ui路由器。谢谢。

的index.html

<html>  
<body> 

<div class="fluid-container"> 
    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
</div> 

</body> 
</html>

content.html

<div class="row" style="background-color: #F9F9F8"> 
    <div class="col-md-3"></div> 

    <div class="col-md-6"> 
     <ul class="nav nav-pills nav-justified"> 
      <li class="active"><a data-toggle="pill" href="#globalView">Global</a></li> 
      <li><a data-toggle="pill" href="#subView">Sub View</a></li> 
     </ul> 
    </div> 

    <div class="col-md-3"></div> 
</div> 

<div class="row">  
    <br> 
    <hr></hr> 
    <div class="tab-content"> 
     <div id="globalView" class="tab-pane fade in active" ui-view="globalView"></div> 
     <div id="subAccountView" class="tab-pane fade" ui-view="subView"></div> 
    </div> 

</div>

app.js

$urlRouterProvider.otherwise("/firstPage"); 
    $urlRouterProvider.when('', '/firstPage'); 
    $stateProvider 
     .state('home', { 
      url: '', 
      views: { 
       /** Find the views named in index.html and inject the named views**/ 
       'header': { 
        templateUrl: 'views/header.html', 
        controller: 'headerController', 
        controllerAs: 'headerCtrl' 
       }, 
       'content': { 
        templateUrl: 'views/content.html', 
        controller: 'contentController', 
        controllerAs: 'contentCtrl',       
       } 
      } 
     }) 
     .state('home.summary', { 
      url: '/firstPage', 
      views: { 
       'globalView': { 
        templateUrl: "views/globalViewPage.html", 
        controller: "globalViewController", 
        controllerAs: "globalViewCtrl" 
       }, 
       'subView': { 
        templateUrl: "views/subView.html", 
        controller: "subViewController", 
        controllerAs: "subViewCtrl" 
       }      
      } 
     });

来源

2016-07-05 Yash Kapila

查看本教程https://scotch.io/tutorials/angular-routing-using-ui-router – Weedoze

感谢Weedoze。本教程相当有帮助。我已在下面发布我的答案。 –

没问题雅什，这是一种享受:) – Weedoze

我发现soluti在评论中通过Weedoze提供的教程进行查询。以下是更新的文件。

index.html保持与上述相同。

content.html

<div class="row"> 
    <div class="col-md-3"></div> 

    <div class="col-md-6"> 
     <ul class="nav nav-pills nav-justified"> 
      <li class="active"><a ui-sref=".globalView">Global</a></li> 
      <li><a ui-sref=".subView">Sub View</a></li> 
     </ul> 
    </div> 

    <div class="col-md-3"></div> 
</div> 

<div class="row">  
    <br> 
    <hr></hr> 
    <div class="tab-content"> 
     <div class="tab-pane fade in active" ui-view></div> 
    </div> 

</div>

这里要补充的一点是，我是稍早在我的锚标记数据切换=“丸”，这是导致两个子视图之间进行导航的问题。进一步挖掘之后，我发现如果删除此切换，导航工作将顺利进行。

app.js

$urlRouterProvider.otherwise("/globalView"); 
    $urlRouterProvider.when('', '/globalView'); 
    $stateProvider 
     .state('home', { 
      url: '', 
      views: { 
       /** Find the views named in index.html and inject the named views**/ 
       'header': { 
        templateUrl: 'views/header.html', 
        controller: 'headerController', 
        controllerAs: 'headerCtrl' 
       }, 
       'content': { 
        templateUrl: 'views/content.html', 
        controller: 'contentController', 
        controllerAs: 'contentCtrl',       
       } 
      } 
     })     
     .state('home.globalView', { 
      templateUrl: "views/globalViewPage.html", 
      controller: "globalViewController", 
      controllerAs: "globalViewCtrl", 
      url: '/globalView' 
     }) 
     .state('home.subView', { 
      templateUrl: "views/subView.html", 
      controller: "subViewController", 
      controllerAs: "subViewCtrl", 
      url: '/subView' 
     });

此代码让我的两个子视图，每当我在视图之间切换，控制器得到重新加载之间进行切换。

来源

2016-07-06 01:30:49

当孩子状态改变时重新加载控制器 - Angular UI路由器

回答

相关问题