UI Router在單個頁面上更新多個角度應用程序中的視圖

Question

我在一個頁面上有多個Angular應用程序，每個應用程序都有各自的狀態配置，但是當我在狀態之間轉換時，頁面上所有Angular應用程序中的ui-view元素都會更新。 如何將狀態更改限制到每個角度應用程序？

我無法使用命名視圖，因為HTML塊已作為門戶產品的一部分動態添加到頁面中，但是每個應用程序中只會有一個視圖

以下plunkr是此問題的非常簡化的版本： https ://plnkr.co/edit/9QV4DySsL3JFK0KoL35C?p=preview

plnkr有2個應用程序，分別引導，但是當我在一個應用程序中更改狀態時，它也會在另一個應用程序中更新。

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>

JS

 angular.module('1', ['ui.router']);
 // state config
 angular.module('2', ['ui.router']);
 // state config

Answer 1

那是因為您沒有定義單獨的模型，所以將ng-app添加到兩個模型中

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

JS

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

您需要結合兩個模型

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

檢查以下示例： https : //plnkr.co/edit/ceZljtnFzQQJuKIFjiyZ?p=preview