Javascript 从另一个模块更新1个模块中的$state变量

我有三个模块，

routerApp

，

股票

和

标签

。基本上是尝试用较小的迷你应用程序重建我的应用程序

routerApp

模板包含其他模块的2条指令

预期 登录后，单击tickers.component中的Count按钮，我想通过

$state.go

将

计数器

var发送到标记中

结果 什么也没发生。tags.component中没有

$state

/变量更新

---

Plnkr app.js代码： dashboard.html 还尝试了：

$state.go（'tags'，{counter:$scope.counter}）

最后是tags.component.
请注意，这里我没有看到$scope.counter更新，也没有看到组件的控制器由于状态更改而刷新

tags.component('tagsModule', {
  templateUrl: 'tags-list.html',
  controller: function($scope, $state) {
    console.log('Tags init', $state)
    $scope.counter = $state.params.counter;
  }
})

我的架构方式是否可行？我错过了什么？


更新：添加了一些
$rootScope
事件以监视$state更改，希望这有助于：

这是在单击登录按钮并从
login
状态转到
dashboard
状态后发生的，但单击计数按钮仍然无效

因此，看起来您在$state.go调用中正确地传递了参数

我认为这里的问题是您没有正确处理从tickers组件传递到tags组件的状态参数

尝试将$stateParams注入标记组件并从该对象中提取参数，例如（在标记控制器中）：

明白了！

我的问题是，在$state对象标记中，我使用了与tags.component相同的模板

相反，我需要将其更改为类似
{{counter}}

var tags = angular.module('tags', ['ui.router'])

tags.config(function($stateProvider) {
  
  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    params: {
      counter: 0
    },
    template: '<p>{{ counter }}</p>',
    bindToController: true,
    controller: function($scope, $state) {
      console.log('tags state object', $state)
      $scope.counter = $state.params.counter;
    }
  }
  
  $stateProvider
    .state(tags);
  
})

tags.component('tagsModule', {
  templateUrl: 'tags-module-template.html',
  controller: function($scope, $state) {
    
  }
})

var tags=angular.module（'tags'，['ui.router']））
tags.config（函数（$stateProvider）{
常量标记={
名称：'标签'，
url:“/tags”，
父项：“仪表板”，
参数：{
柜台:0
},
模板：“{{counter}}
”，
bindToController：对，
控制器：函数（$scope，$state）{
log（'tags state object'，$state）
$scope.counter=$state.params.counter；
}
}
$stateProvider
.国家（标签）；
})
tags.component（'tagsModule'{
templateUrl:'tags module template.html'，
控制器：函数（$scope，$state）{
}
})

然后在我的tags-module.template.html中，我需要添加一个


标签列表
//好的，在这个fork中发生了一些奇怪的事情：我正在使用
$state.go（'tags
）计数，tags.component没有更新，但是由于某种原因，计时器和仪表板被初始化。而且计数器从未超过2，并且被重置。。。
$scope.increase = function() {
  $scope.counter++;
  console.log('increase', $scope.counter)
  $state.go('dashboard.tags', { counter: $scope.counter });
}

tags.component('tagsModule', {
  templateUrl: 'tags-list.html',
  controller: function($scope, $state) {
    console.log('Tags init', $state)
    $scope.counter = $state.params.counter;
  }
})

 $scope.counter = $stateParams.counter;

var tags = angular.module('tags', ['ui.router'])

tags.config(function($stateProvider) {
  
  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    params: {
      counter: 0
    },
    template: '<p>{{ counter }}</p>',
    bindToController: true,
    controller: function($scope, $state) {
      console.log('tags state object', $state)
      $scope.counter = $state.params.counter;
    }
  }
  
  $stateProvider
    .state(tags);
  
})

tags.component('tagsModule', {
  templateUrl: 'tags-module-template.html',
  controller: function($scope, $state) {
    
  }
})

<div class="jumbotron text-center">
    <h2>Tags list</h2>
    <div ui-view></div> // <- here and this is where the $state object updates
    {{ counter }}
</div>