角度js ng路由控制器不起作用

时间:2018-05-08 12:27:32

标签: javascript angularjs google-maps-api-3

我想使用AngularJS Ng-Route。加载页面时调用controllerMap。在这里,我有两个问题。第一个问题是我在openEmModal中调用controllerMap函数时没有调用。第二个问题是当标记位置被更改时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();
}])

0 个答案:

没有答案