从另一个

Question

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

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

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

预期

当您登录时，点击 tickers.component 中的 Count 按钮，我想将counter var发送到标签.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>

尝试更新代码组件的$状态的代码组件中的函数：

$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个事件以观察$状态更改，希望这会有所帮助：

这是在点击登录按钮并从login状态转到dashboard状态后，但仍然没有点击 Count 按钮。

Answer 1

所以，看起来你正好在$ state.go调用中传递参数。

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

尝试将$ 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) {

  }
})

然后在我的tags-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>