Angularjs: Services and ui.router
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();
}]);
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>检查此插件http://angular-ui.github.io/angular-google-maps/#!/，我正在使用它，它具有用于创建Map的完整工具
链接地址: http://www.djcxy.com/p/13638.html上一篇: 以角度在控制器中注入工厂