Angularjs: Сервисы и ui.router

Я использую угловой сервис для рендеринга карты и внедряю его в свой контроллер. Используя 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();
    }]);

javascript angularjs angular-ui-router angular-services
person Mahmoud    schedule 31.05.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы не должны использовать службу для изменений, связанных с 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.

person jad-panda    schedule 31.05.2015
comment
Отличный полный ответ! Спасибо! Как я могу получить доступ к объекту карты в контроллере или другой директиве (например, маркер)? - person Mahmoud; 31.05.2015
comment
Вы можете вызвать обратный вызов initialized из директивы после инициализации карты. см. этот jsfiddle jsfiddle.net/jigardafda/apuq8vde - person jad-panda; 31.05.2015

arrow_upward
1
arrow_downward

Проверьте этот плагин, http://angular-ui.github.io/angular-google-maps/#!/, я использую его, у него есть полный набор инструментов для создания карты

person Amin    schedule 01.06.2015