Angularjs: Services and ui.router

Question

I use an angular service for rendering a map and I injected it into my controller. By using ui.router, when I go to map page for first time, the map renders successfully, but when routing to other page and come back to map page again, the map does not renders, and I should refresh the page for it. I used both factory and service for it, but still there is a problem! Any idea? Here is my service and controller:

    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();
    }]);

jad-panda · Accepted Answer · 2015-05-31 19:10:38Z

You should not use service for DOM related changes and initialising map is DOM related action. instead, use directive for this.

See the below example, I have used open layer map and ui.router to show how you can do the same with directive.

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>

UPDATE

To get map instance from directive, callback can be used from directive with map instance value once map is initialised. working code can be seen here JsFiddle.

Great complete answer! Thanks! How can I access to the map object in a controller or another directive (for example "marker")?
You can trigger initialized callback from directive once map is initialized. see this jsfiddle jsfiddle.net/jigardafda/apuq8vde

Amin · Accepted Answer · 2015-06-01 05:22:44Z

1

Check this plugin, http://angular-ui.github.io/angular-google-maps/#!/, I am using it, it has complete tools for creating Map

answered Jun 1, 2015 at 5:22

Amin

1,3022 gold badges12 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angularjs: Services and ui.router

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related