Question

我使用角度服务渲染地图，然后将其注入我的控制器。通过使用ui.router，当我第一次进入地图页面时，地图呈现成功，但是当路由到其他页面并再次返回到地图页面时，地图不会渲染，我应该为它刷新页面。我同时使用了factory和service，但仍有问题！任何的想法？这是我的服务和控制器：


    angular.module('app')
    .service('mapService', function () {
        var _map = new ol.Map({
            target: 'map-canvas',
            renderer: 'canvas'
        });
        this.map = function () {
            return _map;
        };
    }
    .controller("mapCtrl", ["$scope", "mapService", function($scope, mapService) {
        var map = mapService.map();
    }]);

Answer 1

您不应该将服务用于与DOM相关的更改，并且初始化地图是与DOM相关的操作。相反，使用指令。

参见下面的例子，我使用了开放层图和ui.router来展示你如何对指令做同样的事情。

var app = angular.module('app', ['ui.router']);

app.run(function($templateCache) {
  var homeHtml = '<div>' +
    '<h4>Rome Page</h4>' +
    '<p> this is rome </p>' +
    '<div> <ol-map center="rome"></ol-map> </div>' +
    '</div>';
  $templateCache.put('rome.html', homeHtml);

  var otherHtml = '<div>' +
    '<h4>Bern Page</h4>' +
    '<p> this is bern</p>' +
    '<div> <ol-map center="bern"></ol-map> </div>' +
    '</div>';
  $templateCache.put('bern.html', otherHtml);
});

app.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/rome");

  $stateProvider.state('rome', {
    url: "/rome",
    templateUrl: "rome.html",
    controller: function($scope) {
      $scope.rome = ol.proj.fromLonLat([12.5, 41.9]);
    }
  }).state('bern', {
    url: "/bern",
    templateUrl: "bern.html",
    controller: function($scope) {
      $scope.bern = ol.proj.fromLonLat([7.4458, 46.95]);
    }
  });
});

app.controller('ctrl', function($scope) {

});

app.directive('olMap', function() {

  return {
    restrict: 'E',
    scope: {
      center: '='
    },
    link: function(scope, ele, attr) {

      scope.map = new ol.Map({
        view: new ol.View({
          center: scope.center,
          zoom: 6
        }),
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({
              layer: 'osm'
            })
          })
        ],
        target: ele[0]
      });
    }
  };
});

ol-map {
  width: 500px;
  height: 300px;
  display: block;
}
ul {
  padding: 0px;
}
ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

<div ng-app="app">
  <ul>
    <li><a ui-sref="rome">Rome</a>
    </li>
    <li><a ui-sref="bern">Bern</a>
    </li>
  </ul>
  <div ui-view></div>
</div>

<强>更新

要从指令中获取map实例，可以在初始化map时使用带有map实例值的指令进行回调。可在此处查看工作代码JsFiddle。

Answer 2

检查此插件http://angular-ui.github.io/angular-google-maps/#!/，我正在使用它，它有完整的工具来创建Map

Angularjs：服务和ui.router

2 个答案: