Trying to implement a requirement for an audit log page with a button that opens logs in a new browser window while continuing other activities on the main application. Utilizing ui-router and angularjs (1.6), here is the code snippet -
Controller Route -
.state('auditlog', {
url: '/auditlog',
templateUrl: 'app/system/audit/audit-log.html',
controller: 'AuditLogController',
controllerAs: 'al'
})
Code for button click event in another controller -
unDockEventsPanel(event) {
let location = this.$state.href('auditlog');
this.$window.open(location, '', 'scrollbars=no,fullscreen=yes,toolbar=no');
}
HTML snippet -
<i class="Icon-MoveOut Icon-Large icon-btn" ng-click="eventsPanelVM.unDockEventsPanel($event)">
Clicking the "MoveOut" button triggers the unDockEventsPanel() method opening a new window displaying content from the "auditlog" route definition.
The issue arises when interactions on one window affect the other unexpectedly. For example, selecting a button on the child window may also highlight a control on the parent window, causing confusion. It seems there is overlap of controls and events between the two windows due to them sharing the same instance of the application/controller. However, isolating them proves challenging.
Appreciate any assistance in resolving this matter.