Angular ngif 不会在条件更改时呈现 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）为了调试你可以安装chrome扩展ng-inspector在那里你可以查看你在中心有什么值，当你在html端时可以缩放，检查数据是否有意义。

2) 你使用来自angular-ui 的 angular-google-maps 如果是真的，你有两个错误，

    <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 empty 不是必须的，icon 都在选项里面，就像官网的例子一样。

<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 中的 Edit 进行一些初步测试以熟悉此指令

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