javascript - Angular js ng路由控制器不起作用
问题描述
我想使用 AngularJS Ng-Route。当页面加载时controllerMap被调用。在这里，我有两个问题。第一个问题是当我调用一个openEmModal函数时controllerMap不调用。第二个问题是当标记位置被addListener调用并将url发送到正确的历史但页面被刷新时。我该如何解决？
索引页面：
<html ng-app="exampleApp" ng-cloak="true">
<body>
<div class="container-fluid">
<div class="row">
<div class="adrBody">
<div class="adrHeader">
<div class="container-fluid">
<?php include_once('lib/view/userinfo.php'); ?>
</div>
</div>
<div ng-view class="adrCenter"></div>
<div class="adrFooter" style="display:none !important;">
<?php include_once 'lib/view/footer.php'; ?>
</div>
</div>
</div>
</div>
</body>
地图.php：
<div class="container-fluid" ng-controller="controllerMap">
<div id="map" style="height: 100%;"></div>
</div>
var ngApp = angular.module('exampleApp', ["ngRoute"]);
window.ngApp.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
window.ngApp.config(function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'lib/view/map.php',
controller: 'controllerMap'
}).
when('/home', {
templateUrl: 'lib/view/map.php',
controller: 'controllerMap'
}).
when('/privacy', {
templateUrl: 'lib/view/privacy.php'
}).
otherwise({
templateUrl: 'lib/view/404.php'
});
});
window.ngApp.controller('controllerMap', ["$rootScope", '$scope', '$location', '$window', '$filter', function ($rootScope, $scope, $location, $window, $filter) {
$scope.init = function () {
$scope.lat = $location.search().lat ? $location.search().lat : 75.6744698;
$scope.lng = $location.search().lng ? $location.search().lng : 85.57337;
$scope.zoom = $location.search().zoom ? parseInt($location.search().zoom) : 19;
$scope.latlng = new google.maps.LatLng($scope.lat, $scope.lng);
$scope.map = new google.maps.Map(document.getElementById('map'), {
center: $scope.latlng,
zoom: $scope.zoom
});
$scope.marker = new google.maps.Marker({
map: $scope.map,
position: $scope.latlng,
draggable: true,
icon: 'assets/img/pin-4ldpi.png'
});
$scope.map.setCenter($scope.latlng);
$scope.marker.setPosition($scope.latlng);
google.maps.event.addListener($scope.map, 'idle', function (event) {
history.pushState(null, null, "?lat=" + $scope.lat + "&lng=" + $scope.lng + "&zoom=" + $scope.map.getZoom());
$scope.zoom = $scope.map.getZoom();
});
}
$scope.openEmModal = function ($event) {
if ($event) {
$scope.lat = $($event.currentTarget).data("lat");
$scope.lng = $($event.currentTarget).data("lng");
}
$("#orderEmModal").modal("show");
}
$scope.init();
}])