Angular ng-if не отображает div при изменении условия

Я работаю над изучением Angular с картами Google и испытываю трудности с отображением карты в div, контролируемом директивой ng-if.

Для моего приложения я хотел бы, чтобы карта отображалась при получении координат из функции $scope.location. Затем я нажимал кнопку и вызывал $scope.myRide, чтобы разместить маркер на карте. Однако происходит то, что карта не отображается, пока я не нажму кнопку. Координаты в $scope.map служат заполнителями до тех пор, пока фактические координаты не будут получены из $scope.location. Любая помощь будет принята с благодарностью :)

angular.module('MapView',[])
.config(function($stateProvider){
    $stateProvider
    // the state will go on the html that you want route the user.
    .state('mapView', {
        url: '/mapView',
        templateUrl: 'app/mapView/mapView.html',
        controller: function($scope){
            $scope.map = { center: { latitude: 38, longitude: -122 }, zoom: 15 };
            $scope.output = document.getElementById("loc");
            $scope.maker = {};

            $scope.coords = {};

            $scope.mockUsers = [{username: 'young', mess: 'I need a ride at 9am'},{username: 'young', mess: 'I need a ride at 9am'}, {username: 'young', mess: 'I need a ride at 9am'}]

            $scope.location = function(){
                if (!navigator.geolocation){
                  output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
                  return;
                }
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log('current position',position.coords)
                   $scope.map.center.latitude = position.coords.latitude;
                   $scope.coords.lat = position.coords.latitude; //added this
                   $scope.map.center.longitude = position.coords.longitude;
                   $scope.coords.lon = true; // added this
                }, function(){
                  $scope.output.innerHTML = "Unable to retrieve your location";
                });
            }()


             $scope.myRide = function(){
                $scope.maker.latitude = $scope.map.center.latitude;
                $scope.maker.longitude = $scope.map.center.longitude;
             }
        },
        controllerAs: 'LoginCtrl'
    });
})

Ниже приведен HTML-код:

<div ui-sref='mapView' >

  <div ng-show = "coords.lon == true">Hello</div>

    <div id="loc"></div>


    <div id="mapDiv" ng-if="coords.lon">
        <ui-gmap-google-map center='map.center' zoom='map.zoom' maker=>
            <ui-gmap-marker  coords="maker" icon="icon" idkey="1"></ui-gmap-marker> 
        </ui-gmap-google-map>
    </div>

    <div class="btn-Center">
        <button class="btn btn-danger" ng-click='myRide()' >Ride</button>
    </div>

    <div id="mapUsers">
        <div class="clear" ng-repeat='user in mockUsers'>
            <div class="mapUserImg">
                <img class="img-responsive" src="http://falconbus.in/images/site/user_icon.png">
            </div>
            <h1> {{ user.username }} </h1>
            <p> {{ user.mess}} </p>
        </div>
    </div>

</div>

google-maps javascript angularjs google-geolocation angularjs-ng-if
person jcarapia    schedule 03.08.2016    source источник
comment
попробуйте изменить ng-if на ng-show, ng-if откройте новую область, поэтому, возможно, вы потеряли привязку для этого ng-show, используя ту же область.   -  person chefjuanpi    schedule 03.08.2016
comment
Спасибо, но, к сожалению, ng-show усугубляет ситуацию. Карта по-прежнему не визуализируется автоматически, и при нажатии на кнопку открывается окно карты, но оно пустое.   -  person jcarapia    schedule 03.08.2016

Ответы (3)


arrow_upward
0
arrow_downward

У меня есть некоторые рекомендации,

1) для отладки можно установить расширение chrome ng-spector там вы можете просмотреть, какое значение у вас есть в центре, и увеличить масштаб, когда вы находитесь на стороне html, проверьте, имеют ли данные смысл.

2) я думаю, вы используете angular-google-maps из angular- ui если верно, у вас две ошибки,

    <div id="mapDiv" ng-if="coords.lon">
    <ui-gmap-google-map center='map.center' zoom='map.zoom' **maker=**>
        <ui-gmap-marker  coords="maker" **icon="icon"** idkey="1"></ui-gmap-marker> 
    </ui-gmap-google-map>

пустой маркер не требуется, а значок находится внутри опций, подобных примеру на официальном сайте.

<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
    <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
    </ui-gmap-marker>
</ui-gmap-google-map>
<div ng-cloak>
    <ul>
        <li>coords update ctr: {{coordsUpdates}}</li>
        <li>dynamic move ctr: {{dynamicMoveCtr}}</li>
    </ul>
</div>

3) in the anglar-google-maps website you can use Edit in Plnkr for made some first test to familiarize with this directives

person chefjuanpi    schedule 03.08.2016

arrow_upward
0
arrow_downward 

[<script src="~/Scripts/app/Home.js"></script>  
<div class="container">  
    <div class="row">  
        <div class="col-md-12">  
            <h1>AngularJS Examples</h1>  
            <div ng-app="myApp" style="width:400px;">  
                <div ng-controller="homeController">  
                    <table class="table table-striped table-bordered">  
                        <tbody>  
                            <tr>  
                                <td>Person Name:</td>  
                                <td>  
                                    <input type="text" ng-model="Person.personName" />  
                                </td>  
                            </tr>  
                            <tr>  
                                <td>Person Age:</td>  
                                <td>  
                                    <input type="text" ng-model="Person.personAge" />  
                                </td>  
                            </tr>  
                            <tr>  
                                <td colspan="2" align="center">  
                                    <div class="alert alert-info" ng-if="Person.personAge < 18">  
                                        Person Age must be <strong>above 18 years.</strong>  
                                    </div>  
                                    <div class="alert alert-success" ng-if="Person.personAge >= 18 && Person.personAge <= 100">  
                                        <strong>Valid Age.</strong>  
                                    </div>  
                                    <div ng-if="Person.personAge > 100" class="alert alert-warning">  
                                        Person Age must be <strong> between 18 and 100.</strong>  
                                    </div>  
                                </td>  
                            </tr>  
                        </tbody>  
                    </table>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>

изучите c- Sharpcorner.com

person Ajay Malik    schedule 03.08.2016

arrow_upward
0
arrow_downward

Я заметил, что после получения координат, если я нажму в любом месте на странице, загрузится карта. Таким образом, я изменил файл js, чтобы имитировать щелчок, и он работает. Хотя это работает для моего приложения, я до сих пор не уверен, в чем проблема. Будем очень благодарны любой помощи.

Это функция, которую я изменил, добавив .click() :

$scope.location = function(){
                if (!navigator.geolocation){
                  output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
                  return;
                }
                navigator.geolocation.getCurrentPosition(function(position){
                  console.log('current position',position.coords)
                   $scope.map.center.latitude = position.coords.latitude;
                   $scope.coords.lat = position.coords.latitude; //added this
                   $scope.map.center.longitude = position.coords.longitude;
                   $scope.coords = true; // added this
                   document.getElementById('loc').click();
                }, function(){
                  $scope.output.innerHTML = "Unable to retrieve your location";
                });
            }()
person jcarapia    schedule 03.08.2016