Javascript 1个模块的ui视图从另一个模块复制内容

预期 登录后，当您单击“计数”时，标签列表中的红色数字应该会发生变化，并与Tickers列表中的数字匹配，但提要列表中不会发生任何变化

结果 登录后，单击Tickers列表中的Count，标签列表和提要列表中都会出现红色数字

---

完整plnkr代码

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

tickers.config(function($stateProvider) {
  
  const tickers = {
    name: 'tickers',
    url: '/tickers',
    parent: 'dashboard',
    templateUrl: '<p></p>'
  }
  
  $stateProvider
    .state(tickers);
  
})

tickers.component('tickersModule', {
  templateUrl: 'tickers-list.html',
  controller: function($scope, $state) {
    console.log('Tickers init', $state.params)

    $scope.counter = 0;
    
    $scope.increase = function() {
      $scope.counter++;
      $state.go('tags', { counter: $scope.counter }).then(function() {
      });
    }
  }
})



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

tags.config(function($stateProvider) {
  
  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    params: {
      counter: 0
    },
    template: '<p class="counter">{{ 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 feed = angular.module('feed', ['ui.router'])

feed.config(function($stateProvider) {
  
  const feed = {
    name: 'feed',
    url: '/feed',
    parent: 'dashboard',
    templateUrl: '<em>Feed items go here.</em>'
  }
  
  $stateProvider
    .state(feed);
  
})

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    console.log('Feed init', $state.params)

  }
})


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

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($state) {
        console.log('Dashboard state init', $state)
      }
    }

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

})
.run(['$rootScope', '$location', '$state',
function($rootScope, $location, $state) {
    $rootScope.$on("$stateChangeError", console.log.bind(console));
    $rootScope.$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams, options) {
            // console.log(' ')
            // console.log('toState', toState)
            // console.log('toParams', toParams)
            // console.log('fromState', fromState)
            // console.log('fromParams', fromParams)
            // console.log('options', options)
        });
}]);

var tickers=angular.module（'tickers'，['ui.router']））
tickers.config（函数（$stateProvider）{
常量代码={
名称：'tickers'，
url:“/tickers”，
父项：“仪表板”，
templateUrl:“
”
}
$stateProvider
.国家（股票代码）；
})
tickers.component（'tickersModule'{
templateUrl:'tickers list.html'，
控制器：函数（$scope，$state）{
log（'Tickers init'，$state.params）
$scope.counter=0；
$scope.increase=函数（）{
$scope.counter++；
$state.go（'tags'，{counter:$scope.counter}）{
});
}
}
})
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）{
}
})
var feed=angular.module（'feed'，['ui.router']））
feed.config（函数（$stateProvider）{
常数馈送={
名称：“提要”，
url:“/feed”，
父项：“仪表板”，
templateUrl:“源项转到此处。”
}
$stateProvider
.国家（饲料）；
})
feed.component（'feedModule'{
templateUrl:'feed module template.html'，
控制器：函数（$scope，$state）{
log（'Feed init'，$state.params）
}
})
var routerApp=angular.module（'routerApp'，['ui.router'，'tickers'，'tags'，'feed']）；
routerApp.config（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/login'）；
常量登录={
名称：'登录'，
url:“/login”，
templateUrl:'login.html'，
bindToController：对，
控制器：“l”，
控制器：函数（$state）{
this.login=函数（）{
$state.go（'dashboard'，{}）
}
}
}
常量仪表板={
名称：“仪表板”，
url:“/dashboard”，
templateUrl:'dashboard.html'，
控制器：函数（$state）{
log（'Dashboard state init'，$state）
}
}
$stateProvider
.state（登录）
.国家（仪表板）；
})
.run（['$rootScope'，'$location'，'$state'，
函数（$rootScope、$location、$state）{
$rootScope.on（“$stateChangeError”，console.log.bind（console））；
$rootScope.$on（“$stateChangeStart”，
函数（事件、toState、TopParams、fromState、fromParams、选项）{
//console.log（“”）
//console.log（'toState'，toState）
//console.log（'toParams'，toParams）
//console.log（'fromState'，fromState）
//log（'fromParams'，fromParams）
//console.log（'options'，options）
});
}]);

标签-module-template.html

<div class="jumbotron text-center">
  <h2>Tags list</h2>
  <div ui-view></div>
</div>

<div class="jumbotron text-center">
  <h2>Feed list</h2>
  <div ui-view></div>
</div>

标签列表

feed-module-template.html

<div class="jumbotron text-center">
  <h2>Tags list</h2>
  <div ui-view></div>
</div>

<div class="jumbotron text-center">
  <h2>Feed list</h2>
  <div ui-view></div>
</div>

提要列表

与routerApp模块中的仪表板状态关联的dashboard.html。包含所有3个组件：

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

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

仪表板

标记模块、状态配置和组件代码：

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

tags.config(function($stateProvider) {
  
  const tags = {
    name: 'tags',
    url: '/tags',
    parent: 'dashboard',
    params: {
      counter: 0
    },
    template: '<p class="counter">{{ 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）{
}
})

馈送模块、状态配置和组件代码

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

feed.config(function($stateProvider) {
  
  const feed = {
    name: 'feed',
    url: '/feed',
    parent: 'dashboard',
    templateUrl: '<em>Feed items go here.</em>'
  }
  
  $stateProvider
    .state(feed);
  
})

feed.component('feedModule', {
  templateUrl: 'feed-module-template.html',
  controller: function($scope, $state) {
    console.log('Feed init', $state.params)

  }
})

var feed=angular.module（'feed'，['ui.router']））
feed.config（函数（$stateProvider）{
常数馈送={
名称：“提要”，
url:“/feed”，
父项：“仪表板”，
templateUrl:“源项转到此处。”
}
$stateProvider
.国家（饲料）；
})
feed.component（'feedModule'{
templateUrl:'feed module template.html'，
控制器：函数（$scope，$state）{
log（'Feed init'，$state.params）
}
})

这是具有所需功能的Plunker

在讨论我的解决方案之前，让我们先看看你的

它按您所描述的方式工作的原因是，ui路由器正在执行假定的操作：）

尽管您尝试将模板加载到单独的模块中，但这并没有按照您的计划进行。只要

仪表板

状态被加载，您的所有组件都会被加载。 同时更新

标记模块

和

提要模块

的原因是，它们各自的模板中都有

ui视图

。因此，当您单击按钮并执行

$state.go（“tags”…

）时，您基本上已经在每个组件中加载了

标记

状态模板，其中包含

ui视图

属性

我提供的解决方案使用

$rootScope.$emit

和

$rootScope.$on

发送和接收数据。我必须说，您应该尽可能避免使用$rootScope，但为了简洁起见，我在这里使用了它（真不好意思）

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