如何将此脚本从index.html重写为angularjs app.js

目前，我在头部标签页的index.html中有该脚本。我应该将其移至app.js，对吧？无论哪种方式，你能帮助我吗？如何修改脚本以适应app.js？注：我使用angular.js所以app.js是angular.module如何将此脚本从index.html重写为angularjs app.js

<script> 
    function initialize() { 
     var mapOptions = { 
      zoom: 14, 
      center: new google.maps.LatLng(59.3332346,18.0280576) 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), 
       mapOptions); 
    } 

    function loadScript() { 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 
       'callback=initialize'; 
     document.body.appendChild(script); 
    } 

    window.onload = loadScript;

来源

2014-09-10 Tommy Sollén

移动loadScript到您的文档的HEAD内的实际<script>标签。不需要使用JavaScript加载脚本。

一旦你这样做，对你的地图创建指令：

app.directive('map', function mapDirective() { 

    return { 

     restrict: 'A', 
     scope: { 
      options: '=map' 
     }, 
     link: function link(scope, element) { 
      new google.maps.Map(element[0], scope.options); 
     } 

    } 

});

设置你的HTML文件，利用该指令：

<section ng-controller="MapController"> 
    <div data-map="options"></div> 
</section>

然后终于创建控制器在传递地图选项：

app.controller('MapController', function MapController($scope) { 

    $scope.options = { 
     zoom: 14, 
     center: new google.maps.LatLng(59.3332346,18.0280576) 
    } 

});

来源

2014-09-10 11:21:03 Wildhoney

哇谢谢！很好的答案！但我还没有得到它的工作。 Furst我试图实现所有它，但我的应用程序崩溃。所以我开始检查什么是错误的，我不知道什么，但只要我将控制器输入到controllers.js - 应用程序中断。它不呈现。（'MapController'，函数MapController（$ scope）{ }）; 有什么问题？ – 2014-09-10 11:44:04

对不起，我修改了包含新HTML的答案。这是因为我们在同一个元素上有一个隔离作用域和一个控制器，并且每个都试图创建一个新的作用域。 – Wildhoney 2014-09-10 12:51:01

没有Google Maps API的示例：http://jsfiddle.net/xy8ygcse/ – Wildhoney 2014-09-10 12:54:53

如何将此脚本从index.html重写为angularjs app.js

回答

相关问题