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

Question

目标

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

我们尝试了什么

我们开始使用多个视图/嵌套视图来进行救援。我们最终得到了一个版本，其中许多视图加载了相同的组件， 但所有加载相同的id ，这是不是预期的行为< / strong>因为我们想要分别控制它们，例如在此示例中点击标题并将其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);
                }
          }
      }

  });

Plunker示例

http://plnkr.co/edit/Dq5sDBzREqDzlEnNVhfp?p=preview

问题

我们应该做些什么来阻止其他观点（例如content2点击content1标题）同时更改？同样在制作中我们会有很多观点，不仅仅是这两个观点，但为了简洁，我们简化了这个例子。

现在我们不确定我们是否遗漏了文档中的内容或概念是错误的，我们希望滥用ui路由器来处理它不适用的内容。

（类似的问题，我们知道但不回答在同一屏幕上加载同一组件的多个视图的问题： angular ui router state - multiple states with same template and controller）

Answer 1

没有看到ShowsService.list();的样子，就很难诊断出来。

我的猜测是`ShowsService通过服务注册为工厂。请参阅此回答https://stackoverflow.com/a/15666049/1202630

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