I am opening angular2 component from angularjs as angularjs one is my legacy application and i have a requirement where I need to show some new angular2 component in a window. I found a solution for that using which I am able open a new window with this component.
angular.module('myModule').factory('popupWindow', ['$rootScope', '$compile', '$window',
function ($rootScope, $compile, $window) {
var html = '<survey></survey>';
var link = $compile(html); // note that compilation happens only once
return {
open: function () {
var scope = $rootScope.$new(true);
var w = $window.open('', '_blank', 'toolbar=0,width=1250,height=600');
copyStyles(document, w.document);
// using a cloneAttachFunction, cf. the docs and http://stackoverflow.com/questions/18064543/compile-angular-on-an-element-after-angular-compilation-has-already-happened
link(scope, function (cloned, scope) {
angular.element(w.document.body).append(cloned);
});
}
};
}]);
But I am running into another issue now. This component have md-autocomplete and when I click on it opens md-options but they are tied to parent main application When I looked at developer tools cdk-overlay-container is attached to the parent application instead of child window opened from it. Any solution for this ? https://material.angularjs.org/latest/ is used in this. image attached here
