状態変更時に外部コンテンツをロードしない角度ui-router

Question

Angularを使用してウェブサイトを構築し始め、ngAnimationと一緒にいくつかの病気のアニメーションを使用し始めました。 FacebookのPage Widget（https://developers.facebook.com/docs/plugins/page-plugin）やカスタムマップスタイル用のGoogle Maps APIなどの外部リソースを追加するまでは、すべてうまくいっていました。

問題

私はホームページ上のFacebookのウィジェットを持っている、とあなたが最初に完全にちょうど悪くないデザイン、クライアントの名前を阻止しなければならない（下記見ることができるようにURLにアクセスした場合、それは罰金ロードします。 ...）：

私は（ここで、例えば、コンタクトビューのために、（）を動的ビューにもたらすために、UIビューを使用して、それをロードし、ホームページに戻って別のページをクリックするとコードはウィジェットを表示することです）、ウィジェットはロードされなくなりますが、Facebookが提供する基本ヘッダータグをロードします下に：GoogleマップAPIでロードするとき

また、これは、コンタクトページに起こります。連絡先ページをクリックすると、地図が表示される場所に大きな白い部分が表示されますが、ページを実際に更新する必要がある場合は地図が読み込まれます。

私は、ビューが読み込まれたときにウェブサイトがFacebookやGoogleのいずれかにリクエストを送信できないと仮定していますが、ページが実際にリフレッシュされたときや新しいページが読み込まれたときにのみ起こります。

マイコード

わかりましたので、私は自分のアプリケーションのコードと一緒にどのように動作するかの基本を説明します。私はむしろAngularで新しいので、ひどいコードがある場合はお知らせください。

構造

これは私のWebアプリケーション構造のスクリーンショットです。メインのテンプレートファイルはindex.htmlであり、どのビューもui-routerを使用してロードされたviewsディレクトリ内にあります。私は（変更ありません）ウェブサイトの静的のヘッダを維持するために、ネストされたビューを使用して、ヘッダーの下のビューにロードしています

主な角度アプリケーションコード（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の直後に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 
});