角度ng--如果條件變化時不呈現div

Question

我正在學習使用Google地圖的Angular，並且難以在由ng-if指令控制的div內呈現地圖。

對於我的應用程序，我希望在從$ 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

我有一些recomendations，

1）進行調試你可以安裝鉻擴展ng-inspector在那裏你可以查看你在中心有什麼值，當你在html端時縮放，檢查數據是否有意義。

2）我的事你用角谷歌，地圖從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網站，你可以使用編輯在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文件來模擬點擊，並且它可以工作。儘管這適用於我的應用程序，但我仍然不確定問題的根本問題是什麼。任何援助將不勝感激。

這是我加入了。點擊（）修改的功能：

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