Javascript 如何将$state变量传递到其他两个同级$states？

Plnkr:

架构：

$login

->

$container

（包含

$dashboard

和

$feed

），

仪表板包含：
$tickers
，
$tags
，
$viewHeader
和
$socialMedia
组件

目标：
标记
需要通信并将标记对象发送到
视图标题
和
社交媒体
状态

预期：
登录后，选择标记列表中的按钮应将该标记发送到ViewHeader和SocialMedia状态/组件中

结果：
登录后，在标记中选择一个按钮并转到$state
dashboard
ViewHeader和SocialMedia的$states刷新，但视图模型变量
{{term}}
不会在任何组件中使用适当的标记进行更新


设计说明：
我试图通过混合使用状态、组件、同级组件和视图来解决的问题是，当任何状态发生变化时，应用程序中的每个组件都会刷新/重新初始化<代码>$state.go（'dashboard'）…

这并不理想，我想要的是确保只刷新需要刷新的组件

IE：当我选择一个股票代码或一个标签时，我不希望提要组件每次都刷新。但是，用户应该能够在提要组件中执行操作，它将更新所有其他组件

这就是为什么我创建了一个

容器

状态来保存

仪表板

和

提要

状态。最初，我将所有内容都放在

仪表板

状态中，并且在任何时候

$state.go（'dashboard'

发生

提要

组件也将刷新。如果有更好的方法来解决此问题，lmk！：）

PS：开始学习使用ui路由器进行状态管理，以消除对$rootScope的依赖。到目前为止，我真正的应用程序更加稳定，但是有一个恼人的特性，即每个组件都会刷新/重新初始化

---

在下面的屏幕截图中，我可以清楚地看到正确的

标记

正在被传递到正确的$states，但是

{{term}

没有更新

代码片段（Plnkr中的完整代码）

app.container.html（容器状态）

社交媒体控制器：

$scope.clickTag = function(tag) {
  console.log(' Tag clicked', $state);
  $state.go('dashboard', { tag: tag });
}

social.component('socialModule', {
  templateUrl: 'social-module-template.html',
  controller: function($scope, $state) {
    console.log('Social component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

view.component('viewModule', {
  templateUrl: 'view-module-template.html',
  controller: function($scope, $state) {
    console.log('View component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

$scope.clickTicker = function(ticker) {
    $state.go('container.dashboard.tickers.tags', { ticker: ticker });
}

视图标题控制器：

$scope.clickTag = function(tag) {
  console.log(' Tag clicked', $state);
  $state.go('dashboard', { tag: tag });
}

social.component('socialModule', {
  templateUrl: 'social-module-template.html',
  controller: function($scope, $state) {
    console.log('Social component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

view.component('viewModule', {
  templateUrl: 'view-module-template.html',
  controller: function($scope, $state) {
    console.log('View component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

$scope.clickTicker = function(ticker) {
    $state.go('container.dashboard.tickers.tags', { ticker: ticker });
}

---

奇怪的组件重叠 刚刚注意到这一点，在单击标记并打断social.component的内部后。看起来仪表板组件正在瞬间重新呈现，以取代标记组件：

---

更新后，通过将

{refresh:true}

添加到$state.go-in标记中解决了此问题。请注意，这仍然无法解决我的原始任务，该任务阻止feed.component刷新。因此最终将使用服务。

---

我已经更新了你的装备

解决方案相当简单。在依赖项注入中使用

$stateParams

而不是使用

$stateParams

，这是一个单例，因此如果您像我在更新的plunker中那样引用它：

$scope.params = $stateParams

然后显示值

{{params.ticker.ticker}}

将双向绑定到$stateParams，并在每次更改状态时相应更新

---编辑---

我通过服务添加了另一个解决方案

我更新了你的plunker。你代码中的问题是：

view.component('viewModule', {
  templateUrl: 'view-module-template.html',
  controller: function($scope, $state) {
    console.log('View component', $state.params);
    $scope.term = $state.params.tag.term; //culprit line
  }
});

您需要做的是使用来检索参数。我在viewModule中更改了代码，如下所示：

controller: function($scope, $stateParams) {
    console.log('View component', $stateParams);
    $scope.tickerObj = $stateParams;     
}

{{ tickerObj.ticker.ticker }}

$stateProvider.state('stateName', {
    url: '/stateName',
    controller: 'myCtrl',
    params: { //this can also be used to give default values for route params
        obj: null
    }
});

function myCtrl($stateParams) {
    console.log($stateParams);   //will display the obj parameter passed while transitioning to this state
}

$state.go('stateName', {obj:yourObj}); //passing obj as param to stateName state, this can be retrieved using $stateParams. 

然后相应地更新了

视图模块template.html

以使用tickerObj，如下所示：

controller: function($scope, $stateParams) {
    console.log('View component', $stateParams);
    $scope.tickerObj = $stateParams;     
}

{{ tickerObj.ticker.ticker }}

$stateProvider.state('stateName', {
    url: '/stateName',
    controller: 'myCtrl',
    params: { //this can also be used to give default values for route params
        obj: null
    }
});

function myCtrl($stateParams) {
    console.log($stateParams);   //will display the obj parameter passed while transitioning to this state
}

$state.go('stateName', {obj:yourObj}); //passing obj as param to stateName state, this can be retrieved using $stateParams. 

社交模块也是如此

了解其工作原理的简单示例如下：

controller: function($scope, $stateParams) {
    console.log('View component', $stateParams);
    $scope.tickerObj = $stateParams;     
}

{{ tickerObj.ticker.ticker }}

$stateProvider.state('stateName', {
    url: '/stateName',
    controller: 'myCtrl',
    params: { //this can also be used to give default values for route params
        obj: null
    }
});

function myCtrl($stateParams) {
    console.log($stateParams);   //will display the obj parameter passed while transitioning to this state
}

$state.go('stateName', {obj:yourObj}); //passing obj as param to stateName state, this can be retrieved using $stateParams. 

这与您的问题中发生的问题类似

我注意到您的代码存在另一个问题。单击任何标记（如retweet、moments、tweet）时，它会将ticker再次更改为“AAPL”。这是预期行为吗？（如果不是，则会发生这种情况，因为当您在单击ticker后转换到仪表板状态时，所有模块都会重新初始化。导致此情况的行是

$state.go('tags', { ticker: $scope.tickers[0] });

希望这有帮助

更新：

我更新了plunker。我注释掉了这一行：

$state.go('tags', { ticker: $scope.tickers[0] }); 

默认情况下，每次进入仪表板状态时，都会将ticker设置为apple。我现在也会将ticker和tag对象同时传递到view和social state。如果您查看控制台，您可以获得标记和ticker到这两种状态的正确值。请告诉我这是否适用于您

通过查看控制台日志，可以验证标记和ticker值是否正在传递到视图和社交组件中。 以下是一个片段：

---

发布此消息是因为这是解决此问题的正确方法，并正确地构建了应用程序：

在这里，我正确地使用了子状态和命名视图

容器模板.html

<div>
  <div class="fl w100">
      <em>Container component module scope</em>  
  </div>

  <div ui-view="dashboard"></div>

  <div ui-view="feed" class="fl"></div>
</div>

和到子级的状态导航。子级状态：

$scope.clickTag = function(tag) {
  console.log(' Tag clicked', $state);
  $state.go('dashboard', { tag: tag });
}

social.component('socialModule', {
  templateUrl: 'social-module-template.html',
  controller: function($scope, $state) {
    console.log('Social component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

view.component('viewModule', {
  templateUrl: 'view-module-template.html',
  controller: function($scope, $state) {
    console.log('View component', $state.params);
    $scope.term = $state.params.tag.term;
  }
});

$scope.clickTicker = function(ticker) {
    $state.go('container.dashboard.tickers.tags', { ticker: ticker });
}

---

，请检查此链接，它应该可以解决您的问题。基本上您需要解决您的参数。@Pramod_Para我不确定它是否正确，因为我有一个我命名的参数。另外，在我的plnkr中，即使我在标记按钮上点击状态

仪表板
，状态也不会初始化，组件也不会再次初始化。如果我向您提供一个d，可以吗不同的示例将指导您如何将参数从父级传递到同级状态。这将是非常棒的，而且我试图做的是确保只有我想要更新的同级状态刷新，而不是我不想更新的。例如：在我的示例中，
feed
。ticker->updates tag->updates social，feed保持不更新-很抱歉，这对我来说是漫长的一天，凌晨3点会更新