UI Router обновляет представления в нескольких угловых приложениях на одной странице - PullRequest
Новая
       9

UI Router обновляет представления в нескольких угловых приложениях на одной странице

0 голосов
/ 05 июля 2018

У меня есть несколько приложений Angular на одной странице, каждое из которых имеет собственную конфигурацию состояний, но при переходе между состояниями элементы пользовательского интерфейса обновляются во всех приложениях Angular на странице. Как я могу ограничить изменение состояния для каждого углового приложения?

Я не могу использовать именованные представления, поскольку блоки 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

1 Ответ

0 голосов
/ 05 июля 2018

Это потому, что вы не определяете отдельную модель, добавьте 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

...