条件変更時にレンダリング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

、

1）デバッグ用クロム拡張子をインストールできます3210には、HTML側にあるときにどの値を中央に表示したりズームしたりして、データに意味があるかどうかを確認できます。あなたはangular-uiからの角度とGoogleマップを使用し

2）私の事本当であるならば、あなたは2個のエラーを持って、空の

<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とアイコンではありませんがの例のようなオプションの内側にありますか公式ウェブサイト。あなたはこのディレクティブ

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

に慣れるために作られたいくつかの最初のテストのためにPlnkrで[編集]を使用することができますanglar-google-mapsウェブサイトで

<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）私はどこかをクリックすると、私は、座標を受けていることに気づい地図がロードされるページ。私はこのようにjsファイルを変更してクリックをシミュレートしています。これは私のアプリケーションでは機能しますが、問題の根本的な問題点はまだわかりません。どんな支援も大歓迎です。

これは私が）（.clickを追加することによって変更機能ですので、あなたが結合あなたを失ったことができ、NG-場合-ショーをngのことで変更する

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