Ответ 1
ok Я потратил немного времени на то, чтобы вы предложили рабочее решение. Однако он предполагает определенный уровень согласованности и контроля над вашими приложениями angular.
Шаг первый состоял в том, чтобы просто добавить навигацию со ссылками на раздел моего вспомогательного приложения angular:
<nav>
<ul>
<li><a href="#/app1/main">App1</a></li>
<li><a href="#/app2/home">App2</a></li>
</ul>
</nav>
На той же родительской странице я также добавил iframe, поскольку вы требуем:)
<section>
<iframe src=""></iframe>
</section>
С помощью следующих скриптов для обработки изменений адреса в родительском окне:
// Simple method to look for the second index of something
String.prototype.secondIndexOf = function (val) {
var fst = this.indexOf(val);
var snd = this.indexOf(val, fst + 1)
return snd
}
// My goto method to basically go to somewhere in my angular apps
function goto(app, route) {
$('iframe').attr('src', app + '/test.html#' + route)
}
// upon hash change of the parent page I will call my goto method if there is a hash
$(window).on('hashchange', function () {
var hash = location.hash;
if (hash) {
var appName = hash.substring(hash.indexOf('app'), hash.indexOf('app') + 4);
var route = hash.substring(hash.secondIndexOf('/'));
goto(appName, route);
}
});
// On initial page load I also like to trigger this hash change to
// go to the right location initially
$(window).trigger('hashchange');
Очевидно, что это, по-видимому, одностороннее решение, если мы также не создадим обратную модификацию url из дочерних angular приложений обратно в родительское окно.
Чтобы достичь этого, я решил подтолкнуть изменения хэша к родительскому окну внутри события $routeChangeStart для каждого приложения:
так, например, для app1 это будет:
.run(["$rootScope", function ($rootScope) {
$rootScope.$on('$routeChangeStart', function(next, current) {
if (current.$$route){
window.parent.location.hash = "#/app1" + current.$$route.originalPath;
}
});