Google Maps的AngularJS路由

Ian Pennebaker 发表于 Dev

伊恩·彭纳贝克

我无法让第二个视图显示在我的应用中。该应用程序应该做的是列出位置，当您单击某个位置时，它应该被路由到嵌入了Google Map的其他视图并在该位置搜索坐标。我已经为我的项目设置了一个插件 for。我相信我的问题出在定义我的控制器/模块上。我会将代码发布在这里，但是有多个类可能会引起混淆。有人可以帮忙吗？

演示：http：//plnkr.co/edit/OZZRgiEcrLzreW3lrc5v？p = preview

诺贝尔奖

这应该可以进一步帮助您：http : //plnkr.co/edit/IEj0HAolgmUVrCghMtgN

除其他外，您的路由配置不正确

    $routeProvider
      .when("/index", {
        templateUrl:"index.html", 
        controller: "firstCtrl"})
      .when("/map", {
        templateurl:"map.html",
        controller: "MapController"})
      .otherwise("/index");

这会将您的默认视图（包含在中）<div ng-view>设置为index.html，其中包含<div ng-view>。像无限循环之类的东西。

我将视图分为两个：search.html和map.html，并将路由更新为如下所示：

$routeProvider
      .when("/search", {
        templateUrl: "search.html",
        controller: "searchController"
      })
      .when("/map/:locationName", {
        templateUrl: "map.html",
        controller: "mapController"
      })
      .otherwise({
        redirectTo: '/search'
      });

另外，您的地图数据也没有发送到mapController。有关解决方案，请参见plunkr。您现在唯一需要做的就是发送位置而不是名称。

我已经整理了一下代码，并提供了一些有关路由工作方式以及如何改进模块定义的信息。

当我开始使用AngularJS时，这对我非常有帮助。它也可能对您有帮助：https : //docs.angularjs.org/tutorial/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。