Google Maps-Partial停止在AngularJS中工作

Question

我正在使用AngularJS + Foundation 5开展一个Web项目，实际上我对部分视图有些麻烦。当我在同一个index.html页面中编写所有内容时没有问题，但是当我尝试通过将组件保存为部分，然后在index.html中链接它们来使所有内容更加“动态”时，组件停止工作。我在开始时遇到了基础5 + AngularJS的同样问题，但是我在某些情况下通过在控制器的编译功能中调用基础来解决它。

index.html：我尝试了以下两种方法：

<ng-include src="partials/google-maps.html"></ng-include>

<div data-ng-controller="googleMapsCtrl">
    <div google-maps></div>
</div>

控制器：

app.controller('googleMapsCtrl', [])
.directive('google-maps', ['$compile',
function () {
    return {
        templateUrl: './partials/google-maps.html',
        compile: function () {
            jQuery(document).foundation();
        }
    }; }]);

map.css，包含在index.html中：

.angular-google-map-container { height: 400px; }

当我包含部分内容时，我认为我犯了错误。有些想法如何解决这个问题？

非常感谢！