Javascript 角度ui路由器加载具有不同参数的相同模板 目标

我们有许多视图，希望使用相同的模板/控制器填充这些视图。每个控制器都应接收一个

id

，该id将在不影响其他控制器的情况下加载。我们不希望在模板的

.directive

中使用

作用域：{item:'='}

双向绑定。考虑以这种方式加载的数千个元素（在本例中，我们只有两个元素）

我们尝试了什么 我们开始使用多个视图/嵌套视图进行救援。我们最终得到了一个版本，其中许多视图加载相同的组件，但所有视图都加载相同的

id

，这不是预期的行为，因为我们希望分别控制每个视图，也就是说，在本例中，单击标题并将其

id

传递给

content1

不应导致

content2

也加载它。

（代码基于此示例：）

短代码 index.html

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

普朗克例子

问题 我们应该怎么做才能防止另一个视图（例如，当我点击

content1

标题时，

content2

）同时更改？同样在生产中，我们会有很多视图，不仅仅是这两个，为了简洁起见，我们简化了示例

现在，我们不确定我们是否从文档中遗漏了一些东西，或者这个概念是错误的，我们想滥用ui路由器，因为它不是为之设计的

（我们知道类似问题，但没有回答多个视图在同一屏幕上加载同一组件的问题：

---

)没有看到

显示的服务列表（）看起来很难诊断

我猜showservice是注册为工厂而不是服务。看到这个答案了吗

代码没有做您期望它做的事情是什么？你问题的那一部分没有明确界定。根据我的推测，您正在尝试通过一条路径管理的特定指令的ng重复？我编辑了这个问题。我希望现在一切都清楚了。简而言之：
content1
中的更改不应更改
content2
。现在就是这样，你不用猜。它在
plunker
示例中，
script.js
来自
第69行
。是的，它已注册为
工厂
。
  .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);
                }
          }
      }

  });

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