Angular-ui-router加载具有不同参数的相同模板

Question

目标

我们要使用相同的模板/控制器填充许多视图。 他们每个人都应该收到一个id ，该id将在不影响其他控制器的情况下加载。 我们不想使用scope: { item: '=' }在模板的.directive中的两种方式绑定。 考虑一下以这种方式加载的数千个元素（在示例中，我们只有两个元素）。

我们尝试了什么

我们开始使用多个视图/嵌套视图进行救援。 我们最终得到了一个版本，其中许多视图都加载相同的组件， 但是所有视图都加载相同的id ，这不是我们要分别控制它们的预期行为 ，即在此示例中， 单击title并将其id传递给content1不应导致content2也要加载它。

（代码基于以下示例： http : //www.funnyant.com/angularjs-ui-router/ ）

短代码

index.html

<div ui-view="header"></div>
<div ui-view="content1"></div>
<div ui-view="content2"></div>
<div ui-view="footer"></div>

script.js

  .state('app.shows', {
      url: 'shows',
      views: {
          'content1@': {
              templateUrl: 'shows.html',
              controller: function($scope, ShowsService) {
                $scope.shows = ShowsService.list();
              }
          },
          'content2@': {
              templateUrl: 'shows.html',
              controller: function($scope, ShowsService) {
                $scope.shows = ShowsService.list();
              }
          }
      }
  })
  .state('app.shows.detail', {
      url: '/',
      params: {
        // this is for hiding parameter from URL
        id: null,
      },
      views: {
          'detail@app.shows': {
              templateUrl: 'show-detail.html',
              controller: function($scope, $stateParams, ShowsService) {
                  $scope.selected = ShowsService.find($stateParams.id);
                }
          }
      }

  });

柱塞示例

http://plnkr.co/edit/Dq5sDBzREqDzlEnNVhfp?p=预览

问题

我们应该做些什么来防止其他视图（如content2 ，当我点击一个content1题）在同一时间改变？ 同样在生产中，我们将有很多视图，不仅是这两种视图，而且为了简洁起见，我们简化了示例。

现在，我们不确定文档中是否缺少某些内容，或者该概念不正确，并且我们想滥用ui路由器来处理其原本不适合的内容。

（我们知道类似的问题，但是没有回答以下问题：在同一屏幕上有多个视图加载同一组件： 角度ui路由器状态-具有相同模板和控制器的多个状态 ）

Answer 1

没有看到什么ShowsService.list(); 看起来很难诊断。

我的猜测是`ShowsService已通过服务注册为工厂。 看到这个答案https://stackoverflow.com/a/15666049/1202630

module.service(‘ShowsService’, function(){
    // Your Stuff
});