Question

我有一个像这样的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>

两个内容包装器div，同时带有一个名为content-view的ui视图。

我的州配置看起来像这样，

$stateProvider
  .state('home', {
    url: ''
  })

$stateProvider
  .state('content-view', {
    url: '',
    views: {
      "content-view": {
        template: '<div>Content</div>',
        }
      },
  })

在此处查看此操作＆gt; http://plnkr.co/edit/997KbH9beLLHClM0IKb9?p=preview

如果用户点击两个ui-sref元素中的一个，则ui-view'content-view`元素都会被触发并注入模板。

我希望看到只有被点击的content-wrapper元素中的ui视图才会被触发。

隐藏一个或另一个元素不是一个好的解决方案，因为那时视图仍然必须加载其中的所有数据。所以我认为我最好的选择是在同一个内容包装元素中定位特定的ui-view。

*更新*

我更新了我的plunker＆gt; http://plnkr.co/edit/997KbH9beLLHClM0IKb9?p=preview

我创建了几行，其中包含内容div。每行有1个ui-view元素。如果用户单击其中一个链接，则会将模板放在每个视图中。虽然我想定位用户点击的内容包装器内的视图。

Answer 1

使用ui-view提供的当前模型根本无法创建具有相同名称的独立ui-router状态。最接近的可能实现可能是 ui-router-extras 的 sticky 模块。您可以通过在州内使用 multiple named views 来创建多个独立（粘性）状态。

<强> DEMO

的Javascript

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'
  });

});

HTML 的

<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>

Answer 2

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

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

ListBox

然后用指令绑定你选择的内容然后每当你改变指令的电影内容时也会改变......

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
}

如果有多个具有相同名称的ui-view元素，如何使用1 ui-view？

2 个答案: