Question

想象一下html如下：

<body ng-app="blocksApp">

Some content goes here

<div ui-view="monty">

    <div ui-view="dave">Aaa</div>
    <div ui-view="pete">Bbb</div>
    <div ui-view="steve">Ccc</div>

</div>

</body>

使用ui-router，有没有办法编写一个将设置＆＃34; dave＆＃34;一个新的html片段，同时保持其他所有内容不受影响。

e.g。我想这样做：

$stateProvider
        .state('daveonly',{
            url: "/dave",
            views:{
                'dave':{template:"Dave now has content"}
            }
        })

我无法让它发挥作用。我想这样做的原因是，我有时会想要取代Dave＆＃39;部分更新，其他时候我想更换整个＆＃39; monty＆＃39;部分更新。似乎ui-router不喜欢在同一个html片段中嵌套ui-views。

Answer 1

从一个角度来看，我想建议：

将html代码移至'.tpl.html'文件
使用'templateUrl'代替'template'

并检查以下内容是否适合您：

$stateProvider.state("daveonly", {
    views: {
        "dave": {
            templateUrl: 'daveonly.tpl.html',
        },
        "pete": {
            templateUrl: 'pete.tpl.html',
        },
        "steve": {
            templateUrl: 'steve.tpl.html',
        },        
    }    
});

请查看page1和page2了解详情。

但是从另一个角度来看，仅使用一个ui-view并重新设计当前的ui-views以成为控制器/服务的适当指令可能更有用：使用带有控制器/服务的指令可以帮助管理部分正确重新加载并编写单元测试。

Answer 2

是的，它可以在抽象状态的帮助下轻松完成，是的，你是正确的ui-router不直接直接嵌套视图，但如果视图在任何子模板中，它可以正常工作。

现在考虑这个主页面（index.html）

<body ng-app="app">
 <div ng-view=""></div>
</body>

现在这个模板将出现在这个未命名的视图中。（parent.html）

<h3>This is the parent template</h3>
<div ng-view="child1"></div>
<div ng-view="child2"></div>

现在是JS文件

$stateProvide.state('home',{
  url:'/',
  abstract:true,
  views:{
    "":{
      templateUrl:'parent.html'
    }
  }
})
.state('home.child',{
  url:"",
  views:{
    'child1@home':{
      templateUrl:'child1.html'
    },
    'child2@home':{
      template:'Child2'
    }
  }
})
.state('home.child.child1',{
  url:"child1@home.child",
  views:{
    'child1@home':{
      templateUrl:'child1viewchange.html'
    }
  }
});

（现在是操纵部分）

(child1.html)

<button ui-sref="home.child.child1">Child</button>

现在，child1viewchange.html pe jana padega和wo dekhne wali hai kaunsi kaisi thi / ...... （child1viewchange.html）

<h3>Child1's view change</h3>

现在，当我们点击子视图1中的按钮时，第一个视图中的内容会发生变化，如果我们分配控制器，那么他们可以使用它们来控制数据。

当嵌套的ui-views存在时，如何定位特定的ui-view元素

2 个答案: