角状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 
});