问题

Question

我已经开始使用Angular构建一个网站，并开始使用ui-router和ngAnimation来制作一些生病的动画！一切顺利，直到我开始为某些自定义地图样式添加Facebook的Page Widget（https://developers.facebook.com/docs/plugins/page-plugin）和Google Maps API等外部资源。

问题

我在主页上有Facebook小部件，当你第一次访问URL时它会正常加载，如下所示（必须阻止客户端名称，完全不仅仅是糟糕的设计...）：

一旦我点击其他页面加载它（使用ui-view动态引入视图），例如联系人视图并返回主页（代码显示小部件），小部件将不再加载，但将加载Facebook提供的基本标题标记，如下所示：

在Google Maps API中加载时，也会在联系页面上进行此操作。如果我点击联系页面，地图应该只有一个大的白色区域，但如果你必须实际刷新页面，地图就会加载。

我假设问题是网站无法在加载视图时向Facebook或Google发送请求，但只能在网页实际刷新或新页面加载时发生。

我的代码

好的，我将解释我的应用程序如何与代码一起工作的基础知识。我对Angular很新，所以如果我有可怕的代码，请告诉我。

结构

这是我的网络应用结构的屏幕截图。主模板文件是index.html，任何视图都在views目录中，使用ui-router加载。

Main Angular应用程序代码（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。我的控制器实际上当前没有任何东西。我在某些方面确实有一些vanilla 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 
});

Angular ui-router在状态更改时未加载外部内容

问题

我的代码

结构

Main Angular应用程序代码（app.js）

2 个答案: