Как изолировать javascript и css всплывающего окна с родительской страницы?

Question

Проблема: когда я открываю модальную всплывающую страницу, содержащую javascript и css, оба отражаются на родительской странице, создавая беспорядок. Я использую angularjs и открываю модальные формы следующим образом:

var modalInstance = $modal.open({ 
animation: true, 
templateUrl: 'myPopup.html', 
controller: 'MyController', 
scope: $scope 

});

, и даже когда я закрываю всплывающее окно, родительская страница продолжает испортиться. Как я могу выделить popss css и javascript так, чтобы они не отражались на родительской странице? Есть ли простой способ сделать это?

пс. Я попытался создать новую область и передать ее как параметр модальному, ожидая, что DOM родительской страницы не будет изменен, но не будет успеха.

Редактировать: ссылка компонента this.

Answer 1

Можете ли вы изменить CSS, чтобы он не содержал правил, которые применяются к элементам вне вашего шаблона? Если вы можете однозначно идентифицировать свой шаблон, предоставив идентификатор контейнеру, вы можете изменить правила, чтобы они применимы только к элементам внутри этого. Что касается javascript, вы можете сделать то же самое, хотя это действительно зависит от самого кода. Можете ли вы дать больше информации о CSS и сценариях, которые вы используете?

Редактировать: Следуя предложению Алекса, самым лучшим подходом было бы открыть iframe внутри модального. Для этого шаблон, который вы визуализируете в своем модальном файле myPopup.html, будет содержать только iframe, указывающий на URL-адрес, и на странице, доступной через этот URL, вставьте свой компонент. Что касается связи с компонентом, вы можете передавать параметры в URL-адресе, а затем читать их, как описано here или here.

Если вам нужна связь в противоположном направлении, то есть, если взаимодействие пользователя с модальным образом должно каким-то образом повлиять на страницу, из которой был открыт модальный, становится сложно, так как вам, вероятно, потребуется задействовать сервер.