Javascript UI路由器在单个页面上更新多个角度应用程序中的视图

我在一个页面上有多个Angular应用程序，每个应用程序都有自己的状态配置，但是当我在状态之间转换时，页面上所有Angular应用程序中的ui视图元素都会更新。如何限制每个angular应用程序的状态更改

我不能使用命名视图，因为HTML块是作为门户产品的一部分动态添加到页面的，但每个应用程序中都只有一个视图

以下是该问题的简化版本：

plnkr有两个应用程序，分别引导，但当我在一个应用程序中更改状态时，它也会在另一个应用程序中更新

html

<div id='1'>
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>

    <ui-view></ui-view>
</div>

<div id='2'>
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>
    <ui-view></ui-view>
</div>

<script type="text/javascript">
    angular.bootstrap(document.getElementById('1'), ['1']);
    angular.bootstrap(document.getElementById('2'), ['2']);
</script>

---

这是因为您没有定义单独的模型，而是将ng应用程序添加到您的两个模型中

<div id='1' ng-app="app2">
  <a ui-sref="hello" ui-sref-active="active">Hello</a>
  <a ui-sref="about" ui-sref-active="active">About</a>

  <ui-view></ui-view>
</div>

<div id='2' ng-app="app2">
  <a ui-sref="hello" ui-sref-active="active">Hello</a>
  <a ui-sref="about" ui-sref-active="active">About</a>

  <ui-view></ui-view>
</div>
<script type="text/javascript">
    angular.bootstrap(document.getElementById('1'), ['1']);
    angular.bootstrap(document.getElementById('2'), ['2']);
</script>

您需要将这两个模型结合起来

angular.module("CombineModule", ["app1", "app2"]);

---

检查此示例：

你能在plunkr中演示一下吗？你的示例不起作用，如果你查看plnkr，只有一个应用程序是可点击的。第二对“hello”和“about”链接不可单击，控制台中的eis JS错误“错误：[$injector:modulerr]未能实例化模块1，原因是”

angular.module('app1', ['ui.router']);
 // state config
 angular.module('app2', ['ui.router']);
 // state config

angular.module("CombineModule", ["app1", "app2"]);