Angular ng-wenn nicht div bei Bedingung Änderung

Question

Ich arbeite an Angular lernen mit Google Maps und Schwierigkeiten beim Rendern einer Karte in einem div von einer ng-if-Richtlinie gesteuert.

Für meine Anwendung möchte ich die Karte beim Empfangen der Koordinaten aus der Funktion $ scope.location rendern. Ich würde dann auf eine Schaltfläche klicken und $ scope.myRide aufrufen, um eine Markierung auf der Karte zu platzieren. Was passiert ist jedoch, dass die Karte nicht gerendert wird, bis ich auf die Schaltfläche klicke. Die Koordinaten in $ scope.map dienen als Platzhalter, bis die tatsächlichen Koordinaten von $ scope.location empfangen werden. Jede Hilfe wird sehr geschätzt :)

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' 
    }); 
}) 

Im Folgenden ist der 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

ich einige recomendations haben,

1) für das Debuggen Sie können die Chrome-Erweiterunginstallierendort können Sie sehen, welchen Wert Sie in der Mitte und Zoom haben, wenn Sie in der HTML-Seite sind, überprüfen Sie, ob die Daten Sinn haben.

2) i, was Sie verwenden Winkel Google-Maps von angular-ui wenn sie wahr ist, haben Sie zwei Fehler,

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

Marker leer ist nicht necesesary und Symbol Sie sind innen Optionen wie das Beispiel in der offizielle Website.

<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 der anglar-google-maps Website, die Sie bearbeiten in Plnkr für gemacht einigen ersten Test vertraut zu machen mit diesen Richtlinien

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

Ich bemerkte, dass beim Empfang der Koordinaten verwenden können, wenn ich irgendwo auf klicken die Seite, die die Karte lädt. Ich habe also die js-Datei modifiziert, um einen Klick zu simulieren, und es funktioniert. Obwohl dies für meine Anwendung funktioniert, bin ich mir immer noch nicht sicher, was das Grundproblem des Problems ist. Jede Hilfe würde sehr geschätzt werden.

Dies ist die Funktion, die ich durch das Hinzufügen eines .click modifiziert ist():

$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"; 
       }); 
      }()