Javascript Angular js ng路线控制器不';行不通
我想使用AngularJSJavascript Angular js ng路线控制器不';行不通,javascript,angularjs,google-maps-api-3,Javascript,Angularjs,Google Maps Api 3,我想使用AngularJSNg路线。加载页面时,将调用controllerMap。在这里,我有两个问题。第一个问题是当我调用controllerMap中的openemodal函数时,它不调用。第二个问题是当标记位置被更改时,调用addListener,并将url发送到正确的历史记录,但页面被刷新。我怎样才能解决这个问题 İndex页面: <html ng-app="exampleApp" ng-cloak="true"> <body> <div class=
Ng路线
。加载页面时,将调用controllerMap
。在这里,我有两个问题。第一个问题是当我调用controllerMap
中的openemodal
函数时,它不调用。第二个问题是当标记位置被更改时,调用addListener,并将url发送到正确的历史记录,但页面被刷新。我怎样才能解决这个问题
İndex页面:
<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>
Map.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();
}])
var ngApp=angular.module('exampleApp',[“ngRoute”]);
window.ngApp.config(['$locationProvider',函数($locationProvider){
$locationProvider.html5模式({
启用:对,
requireBase:错误
});
}]);
window.ngApp.config(函数($routeProvider){
$routeProvider。
当(“/”{
templateUrl:'lib/view/map.php',
控制器:“控制器映射”
}).
当(“/home”{
templateUrl:'lib/view/map.php',
控制器:“控制器映射”
}).
当(“/隐私”{
templateUrl:'lib/view/privacy.php'
}).
否则({
templateUrl:'lib/view/404.php'
});
});
controller('controllerMap',[“$rootScope”,'$scope','$location','$window','$filter',函数($rootScope,$scope,$location,$window,$filter){
$scope.init=函数(){
$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=新的google.maps.latlng($scope.lat,$scope.lng);
$scope.map=new google.maps.map(document.getElementById('map'){
中心:$scope.latlng,
zoom:$scope.zoom
});
$scope.marker=new google.maps.marker({
map:$scope.map,
职位:$scope.latlng,
真的,
图标:“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=函数($event){
如果($事件){
$scope.lat=$($event.currentTarget).data(“lat”);
$scope.lng=$($event.currentTarget).data(“lng”);
}
美元(“#orderemodal”).modal(“show”);
}
$scope.init();
}])
不要在angularjs中使用PHP和jQuery。AngularJS可以像PHP一样呈现模板/部分,并且可以使用指令(使用jQLite)而不是jQuery修改DOM<代码>HTML5模式将中断您的路由,因此您需要在服务器端对其进行配置controllerMap
现在是一个单独的模块,您需要使用angular.module('exampleApp',[“ngRoute”,“controllerMap”])注入它。
这里的问题是没有调用$scope.OpeneModal(),正如您所说,我尝试过,但得到了一个错误。controllerMap只调用了一次。以后我再也不能用了。