Angular.js：服务和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();
    }]);

Answer 1

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 .

Answer 2

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