Угловое ng-если не рендеринг div при изменении состояния

Question

Я работаю над обучением Угловые с картами 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> 

Answer 1

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

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

2) я вещь, которую вы используете угловые-Google-карты из 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> 

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

<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) в anglar-google-maps сайта вы можете использовать Edit в Plnkr для сделана некоторых первых испытаний, чтобы ознакомиться с этими директивами

Answer 2

[<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> 

learn from c-sharpcorner.com

Answer 3

я заметил, что при получении координат, если я нажимаю в любом месте страница, на которую будет загружена карта. Таким образом, я модифицировал файл 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"; 
       }); 
      }()