角狀UI路由器不會加載狀態變化的外部內容

Question

我已經開始使用Angular構建一個網站，並且已經開始使用ui路由器和ngAnimation一起用於一些生病的動畫！一切都很順利，直到我開始爲某些自定義地圖樣式添加外部資源，例如Facebook的Page Widget（https://developers.facebook.com/docs/plugins/page-plugin）和Google Maps API。

的問題

我主頁上的Facebook構件，並且在第一次訪問如可以看到下面的URL（具有阻止客戶端的名稱，完全不只是糟糕的設計，它加載的罰款。 ..）：

當我點擊其他網頁上加載它（使用UI視圖在一個視圖動態地將），例如聯繫人視圖，並返回到主頁（其中代碼是顯示小部件），小部件將不再加載，但會加載Facebook提供的基本標題標籤，如可以看到的如下：

在谷歌地圖API的加載時也會發生這種情況的聯繫頁面上。如果我點擊聯繫人頁面，那麼地圖應該是一個很大的白色區域，但如果您必須刷新頁面，地圖纔會加載。

我認爲問題在於，當視圖加載時，網站無法向Facebook或Google發送請求，但只能在頁面實際刷新或加載新頁面時發生。

我的代碼

好了，所以我會解釋我的應用程序是如何工作的以及代碼的基礎知識。我對Angular頗爲新穎，如果我有可怕的代碼，請告訴我。

結構

這是我的網絡應用程序結構的屏幕快照。主模板文件是index.html，任何視圖都在視圖目錄中，這些視圖使用ui-router加載。

主角度應用程序代碼（app.js）

var app = angular.module('bmApp', ['ngAnimate', 'ui.router', 'ui.bootstrap']) 
.config(function($stateProvider, $urlRouterProvider) { 

$stateProvider 
    .state('header', { 
     templateUrl: './assets/views/template.html', 
    }) 
    .state('header.home', { 
     url: '/', 
     templateUrl: './assets/views/home.html', 
     controller: "HomeController" 
    }) 
    .state('header.about', { 
     url: '/about', 
     templateUrl: './assets/views/about.html', 
     controller: "AboutController" 
    }) 
    .state('header.work', { 
     url: '/work', 
     templateUrl: './assets/views/work.html', 
     controller: "WorkController" 
    }) 
    .state('header.services', { 
     url: '/services', 
     templateUrl: './assets/views/services.html', 
     controller: "ServicesController" 
    }) 
    .state('header.contact', { 
     url: '/contact', 
     templateUrl: './assets/views/contact.html', 
     controller: "ContactController" 
    }); 
    $urlRouterProvider.otherwise('/'); //if no views are matched, just redirect back to home page. 
}) 

我使用嵌套視圖，以保持網站靜態的（不改變）的標題，然後在視圖的標題下加載與ngAnimate使它看起來酷。

在我的主要模板index.html中，我有一個簡單的<div ui-view></div>加載在請求的視圖。我也有必要的腳本來請求Facebook的API。我的控制器實際上目前沒有任何內容。有些我確實有一些香草JavaScript，但現在不需要它了。我還嘗試將Facebook提供的代碼包裝在一個函數中，並在特定視圖的控制器中調用它，但它在模板（index.html）頁面的正文中具有相同的結果。

在這拉我的頭髮，似乎無法找到解決方案。我希望我已經解釋了我的問題，而不會錯過任何事情。我感謝你可以給予的任何幫助，會非常棒。

編輯：我應該可能提到我的主模板是index.html，然後將視圖注入到/views/template.html，然後將它注入到index.html中。不太確定這是否是最佳做法，但覺得它會運作良好（我不認爲這是問題）。

Answer 1

我只給你一半的答案，但也許它會指向你正確的方向。我也曾在SPA應用程序中苦苦掙扎過Google API。我有同樣的問題 - 進入聯繫頁面後，出現了一個白色的框，而不是地圖。解決方案竟然很簡單 - 我只需要強制地圖重新加載，當我輸入聯繫表。此功能被附加爲onclick事件聯繫頁面鏈接：

function reloadGoogleMap() { 
    if (counter == 0) { 
     document.getElementById('google-map').src += ''; 
     counter++; 
    } 
} 

我用計數器，以確保它只會發生一次 - 你不會需要它可能。對於Angular，您可能需要確保在元素呈現後重新加載。也許一個簡單的指令會的工作，但我沒有測試：

angular.module('your_directives_module') 
    .directive('mapLoaded', [mapLoadedDirective]); 

function mapLoadedDirective() { 
    return { 
     restrict: 'A', 
     link: function (scope, elem, attrs) { 
      elem.on('load', function (event) { 
       // Force reload 
       elem.src += ''; 
      }); 
     } 
    }; 
} 

它可以用來像：

<!-- Div/iframe with google map --> 
<div map-loaded></div> 

也許Facebook的API也有，你可以用它來迫使小部件的一些簡單方法當部分視圖加載時重新加載，但我從來沒有嘗試過使用Angular。

Answer 2

難道你不需要將它包裝在$ rootScope。$ apply函數中以更新視圖嗎？

$rootScope.$apply(function() { 
    // some code 
});