如何从多个视图中仅更改一个 ui-view。不改变状态

Question

在我的 HTML 中，我在三列中渲染了 3 个不同的 HTML 模板。

 <div id="col1" ui-view="col1"></div>
 <div id="col2" ui-view="col2"></div>
 <div id="col3" ui-view="col3"></div>

状态演示将呈现所有这些，如下所示。

$stateProvider
  .state('demo',{
    views: {
      'col1': {
        templateUrl: 'FirstTemplate.html'
      },
      'col2': {
        templateUrl: 'SecondTemplate.html'
      },
      'col3': {
        templateUrl: 'ThirdTemplate.html'
      }
    }
  })

我的问题是，如何在不更改状态的情况下将 col3 的 templateurl 从 ThirdTemplate.html 更改为 NewTemplate.html。

Answer 1

回答这个问题：

My question is, how can I change templateurl of col3 from ThirdTemplate.html to NewTemplate.html, without changing the state. ?

这是不可能的。它既不打算也不支持。

UI-路由器背后的想法是在状态 之间导航（即使不使用 url、$state.go()）。一旦状态 TO 为 found/resolved，其所有设置将转换为实现 (controllerProvider 返回控制器或用于查找控制器的字符串， templateProvider返回模板等)

此后，状态稳固。我们可以使用其他一些 angular 功能 （指令） 来操纵 DOM，但除非我们愿意 change the state - 它的部分是固定的。

如果我们可以接受状态变化（包括当前状态重新加载），我们可以获利，例如来自模板提供商：

Angular and UI-Router, how to set a dynamic templateUrl

注意：上面的状态变化意味着：1) 导航到其他或 2) 重新加载当前。

Answer 2

<div ng-include="'NewTemplate.html'"></div>

<div ng-hide="'NewTemplate.html'">Thirdtemplate.html</div>

如何从多个视图中仅更改一个 ui-view。不改变状态

How to change only one ui-view out of many. Without changing state

html

angularjs

angular-ui-router