javascript - Angular.js:服务和ui.router

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

    angular.module（'app'）
    .service（'mapService'，function（）{
        var _map = new ol.Map（{
            目标：“地图画布”，
            渲染器：“画布”
        }）;
        this.map = function（）{
            返回_map;
        };
    }
    .controller（“ mapCtrl”，[“ $ scope”，“ mapService”，function（$ scope，mapService）{
        var map = mapService.map（）;
    }]）;

最佳答案

您不应将服务用于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实例，可以在初始化地图后从具有指令实例值的指令中使用回调。可以在此处JsFiddle看到工作代码。

MapService

javascript - Angular.js:服务和ui.router