Angularjs 如果有多个同名的ui视图元素，如何使用1个ui视图？

我有一个这样的html结构

<div class="content-wrapper">
  <div class="content">
    <a href="#" ui-sref="content-view">Click me</a>
  </div>
  <div ui-view="content-view">Template goes here</div>
</div>

<div class="content-wrapper">
  <div class="content">
    <a href="#" ui-sref="content-view">Click me</a>
  </div>
  <div ui-view="content-view">Template goes here</div>
</div>

在此处查看它的实际操作>

如果用户单击两个

ui sref

元素中的一个，则会触发ui视图“content view”元素并注入模板

我希望看到的是，只有被单击的

内容包装器

元素中的ui视图才会被触发

隐藏一个或另一个元素不是一个好的解决方案，因为这样视图仍然必须加载其中的所有数据。因此，我认为我的最佳选择是在同一个内容包装器元素中针对特定的ui视图

*更新*

我已经更新了我的plunker>

---

我创建了几行，其中包含内容div。每行有一个ui视图元素。如果用户单击其中一个链接，则会在每个视图中放置模板。虽然我想针对用户单击的内容包装内的视图。

创建具有相同名称的独立

ui视图

状态对于

ui路由器

提供的当前模型来说是不可能的。最接近的可能实现可能是的模块。您可以利用一个状态中的创建多个独立（粘性）状态

Javascript

app=angular.module（'myApp'[
“ui.router”，
'ct.ui.router.extras'
]);
app.controller（'mainCtrl'，['$scope'，
函数（$scope）{}
])
app.config（函数（$stateProvider，$urlRouterProvider）{
$stateProvider
.州（'main'{
url:“/”
})
.state（'main.sub1'{
斯蒂奇：是的，
观点：{
“sub1@”：{
模板：“sub1”
}
}
})
.state（'main.sub1.part1'{
模板：'.part1'
})
.state（'main.sub2'{
斯蒂奇：是的，
观点：{
"sub2@":{
模板：“sub2”
}
}
})
.state（'main.sub2.part1'{
模板：'.part1'
});
});

HTML

main.sub1|
main.sub1.part1
模板在这里
main.sub2|
main.sub2.part1
模板在这里

您可以在此处使用指令代替嵌套视图，因为您有重复的相同对象，所以嵌套视图对您没有多大帮助

只需定义一个仅用于模板化的指令（当然，您可以根据需要扩展其功能）

app.directive（'contentTemplate'，function（）{
返回{
限制：'E'，
模板：“{vm.movie.title | |“无电影”}已选中”，
范围：{
电影：'='
},
控制器：ContentTemplateController，
controllerAs:'vm'，
bindToController:true
}
})
函数ContentTemplateController（）{
//您的指令控制器，如果您需要它
}

然后用指令绑定您选择的内容，然后每当您更改电影内容时，指令的内容也将更改

<div class="content-wrapper" ng-repeat="movieGroup in movieGroups">
      <div class="content" ng-repeat="movie in movieGroup">
        <button ng-click="movieGroup.selectedMovie = movie;">{{ movie.title }}</button>
      </div>
      <content-template movie="movieGroup.selectedMovie"></content-template>
</div>

{{movie.title}

感谢您的意见。这仅在命名视图时有效。但是我使用ng repeat来呈现我的html。你认为可以给ui视图名一个动态值吗？你能提供你全部的问题吗？您似乎没有提供解决问题的所有信息。我已更新了我的plunker以正确显示问题。为什么不为此使用指令？您能对该指令的外观提出建议吗？看看这个外观很好！谢谢，我没有太多地使用指令，但是用指令的强度替换ui路由器的功能（在本例中是有限的）是解决问题的一个很好的方法。我被困在隧道里了。如果你愿意，你可以回答这个问题，我会投票给你。是的，我会的，谢谢。。。

app = angular.module('myApp', [
  'ui.router',
  'ct.ui.router.extras'
]);

app.controller('mainCtrl', ['$scope',
  function($scope){}
])

app.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('main', {
    url: '/'
  })

  .state('main.sub1', {
    sticky: true,
    views: {
      'sub1@': {
        template: 'sub1<ui-view />'
      }
    }
  })

  .state('main.sub1.part1', {
    template: '.part1'
  })

  .state('main.sub2', {
    sticky: true,
    views: {
      'sub2@': {
        template: 'sub2<ui-view />'
      }
    }
  })

  .state('main.sub2.part1', {
    template: '.part1'
  });

});

<div class="content-wrapper">
  <div class="content">
    <a ui-sref="main.sub1">main.sub1</a> | 
    <a ui-sref="main.sub1.part1">main.sub1.part1</a>
  </div>
  <div ui-view="sub1">Template goes here</div>
</div>
<div class="content-wrapper">
  <div class="content">
    <a ui-sref="main.sub2">main.sub2</a> | 
    <a ui-sref="main.sub2.part1">main.sub2.part1</a>
  </div>
  <div ui-view="sub2">Template goes here</div>
</div>

app.directive('contentTemplate', function() {
  return {
    restrict: 'E',
    template: '<div class="content-view">{{vm.movie.title || "No Movie"}} is selected</div>',
    scope: {
      movie: '='
    },
    controller: ContentTemplateController,
    controllerAs: 'vm',
    bindToController: true
  }
})

function ContentTemplateController() {
  // your directive controller if you need it
}

<div class="content-wrapper" ng-repeat="movieGroup in movieGroups">
      <div class="content" ng-repeat="movie in movieGroup">
        <button ng-click="movieGroup.selectedMovie = movie;">{{ movie.title }}</button>
      </div>
      <content-template movie="movieGroup.selectedMovie"></content-template>
</div>