javascript - 如果 AngularJS 中的父状态 Controller 发生更改，如何重新加载子状态？

标签 javascript angularjs angular-ui-router

我将 ui-router 与 Angular 一起使用，我的想法是 UI 布局中的下拉列表(也是父状态)有一个下拉列表，可以更改子状态中的数据。

路由:

.state('App', {
            url : '/',
            controller : 'AppController',
            templateUrl : 'views/layout.html',

        })

.state('App.userProfile', {
            parent : 'App',
            url : 'profile',
            templateUrl : 'views/user-profile.html',
            controller : 'UserProfileController'            
        })

HTML 下拉列表:

<div class="top-bar">
<div class="top-bar-logo"></div>
<label>Active team</label>
<select class="clean-custom-select margin-bottom-10"
        ng-options="team._id as team.Name for team in userTeams"
        ng-change="changeActiveTeam(ActiveTeamModel)"
        ng-model="ActiveTeamModel">
<option value="">Choose a team</option>

所以我想要实现的是，当选择下拉列表更改时， subview 将重新加载相关更改。但是，这必须适用于所有子状态。上面的代码只是一个子状态的示例，但还有很多。

对于更多上下文，下拉列表将包含团队名称。一旦用户选择了一个团队，所有子状态都应该引用该团队。

最佳答案

根据您的要求，您可以使用 Angular 服务 - $emit、$broadcast、$on 来交换父子层次结构上的事件和范围更改通知。

这将帮助您理解这一点 link

关于javascript - 如果 AngularJS 中的父状态 Controller 发生更改，如何重新加载子状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38202084/