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添加到您的两个模型中

JS

<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('app1', ['ui.router']);
 // state config
 angular.module('app2', ['ui.router']);
 // state config

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

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

1 个答案: