[英]UI Router updating views in multiple angular apps on single page
I have multiple Angular apps on a single page each with their own state configuration, but when I transition between states, the ui-view elements are updated in all the angular apps on the page. 我在一个页面上有多个Angular应用程序,每个应用程序都有各自的状态配置,但是当我在状态之间转换时,页面上所有Angular应用程序中的ui-view元素都会更新。 How can I restrict the state change to each angular app?
如何将状态更改限制到每个角度应用程序?
I am not able to use named views as the HTML blocks are dynamically added to the page as part of a portal product, but there will only ever be a single view in each app 我无法使用命名视图,因为HTML块已作为门户产品的一部分动态添加到页面中,但是每个应用程序中只会有一个视图
The following plunkr is a very simplified version of the issue: https://plnkr.co/edit/9QV4DySsL3JFK0KoL35C?p=preview 以下plunkr是此问题的非常简化的版本: https ://plnkr.co/edit/9QV4DySsL3JFK0KoL35C?p=preview
The plnkr has 2 apps, bootstrapped separately, but when I change state in one app it is also updated in the other app. plnkr有2个应用程序,分别引导,但是当我在一个应用程序中更改状态时,它也会在另一个应用程序中更新。
html 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 JS
angular.module('1', ['ui.router']);
// state config
angular.module('2', ['ui.router']);
// state config
That is because your are not defining separate model add ng-app to your two model like 那是因为您没有定义单独的模型,所以将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 JS
angular.module('app1', ['ui.router']);
// state config
angular.module('app2', ['ui.router']);
// state config
you need to combine the two model 您需要结合两个模型
angular.module("CombineModule", ["app1", "app2"]);
Check this example: https://plnkr.co/edit/ceZljtnFzQQJuKIFjiyZ?p=preview 检查以下示例: https : //plnkr.co/edit/ceZljtnFzQQJuKIFjiyZ?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.