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

Question

https://plnkr.co/edit/PWuKuVw9Dn9UJy6l8hZv?p=preview

我有 3 个模块，routerApp、tickers 和 tags。基本上是尝试用较小的迷你应用程序重建我的应用程序。

routerApp 模板包含其他模块的 2 个指令。

预期

登录后，点击计数按钮tickers.component，我要发送counter var 进入 tags.component $scope 通过 $state.go.

结果

没有任何反应。 tags.component

中没有 $state/变量更新

Plnkr app.js代码：

// TICKERS app module
var tickers = angular.module('tickers', ['ui.router'])

tickers.config(function($stateProvider) {
  
  const tickers = {
    name: 'tickers',
    url: '/tickers',
    parent: 'dashboard',
    templateUrl: 'tickers-list.html',
    bindToController: true,
    controllerAs: 'tik',
    controller: function() {

    }
  }
  
  $stateProvider
    .state(tickers);
  
})

tickers.component('tickersModule', {
  templateUrl: 'tickers-list.html',
  controller: function($scope, $state) {
    console.log('Tickers init')
    
    $scope.counter = 0;
    
    $scope.increase = function() {
      $scope.counter++;
      console.log('increase', $scope.counter)
      $state.go('dashboard.tags', { counter: $scope.counter });
    }
  }
})

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

tags.config(function($stateProvider) {
  
  const tags = {
    name: 'tags',
    url: '/tags?counter',
    parent: 'dashboard',
    params: {
      counter: 0
    },
    templateUrl: 'tags-list.html',
    bindToController: true,
    controllerAs: 'tags',
    controller: function($state) {

    }
  }
  
  $stateProvider
    .state(tags);
  
})

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

// MAIN ROUTERAPP module
var routerApp = angular.module('routerApp', ['ui.router', 'tickers', 'tags']);

routerApp.config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/login');

    const login = {
      name: 'login',
      url: '/login',
      templateUrl: 'login.html',
      bindToController: true,
      controllerAs: 'l',
      controller: function($state) {
        this.login = function() {
          $state.go('dashboard', {})
        }
      }
    }

    const dashboard = {
      name: 'dashboard',
      url: '/dashboard',
      templateUrl: 'dashboard.html',
      controller: function() {
        
      }
    }

    $stateProvider
        .state(login)
        .state(dashboard);

})

dashboard.html

<div class="jumbotron text-center">
    <h1>The Dashboard</h1>
</div>

<div class="row">
  <tickers-module></tickers-module>
  <tags-module></tags-module>
</div>

tickers 组件中尝试更新标签组件 $state 的函数：

$scope.increase = function() {
  $scope.counter++;
  console.log('increase', $scope.counter)
  $state.go('dashboard.tags', { counter: $scope.counter });
}

也尝试过：$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状态，但点击Count按钮仍然没有任何反应.

Answer 1

看来您在 $state.go 调用中正确传递了参数。

我认为这里的问题是您没有正确处理从代码组件传递到标签组件的状态参数。

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

 $scope.counter = $stateParams.counter;

Answer 2

想通了！

https://plnkr.co/edit/CvJLXKYh8Yf5npNa2mUh?p=preview

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

相反，我需要将其更改为 <p>{{ counter }}</p>

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) {
    
  }
})

然后在我的标签中-module.template.html我需要添加一个<div ui-view></div>

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

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

Update $state variable in 1 module from another

javascript

state

angularjs

angularjs-controller

angular-ui-router

预期

结果

Plnkr app.js代码：

dashboard.html

想通了！