Question

当代码尝试访问之前被ng-if

取消的DOM中的元素时，我遇到了问题

该视图的代码如下：

<div class="col-md-9" id="map-container" ng-if="searchCount<=5000">
    <div class="col-md-12" id="map_canvas" >
    </div>
</div>
<div class="cener-btn-container"  ng-if="searchCount>5000"></div>

和一个看起来像

的控制器部分

    $scope.searchCount = $scope.searchList.length;
    $log.debug("Ready to load map");
    $scope.loadMap();       

     $scope.loadMap=function(){
        var latlng = new google.maps.LatLng(39.774769, -101.414795)
        $scope.customList=[];
        var map_options = {
            center: latlng,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            zoomControl: true
        };

        google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
        ...
        $log.debug("Map lodaded");

    }

达到searchCount超过5000个结果并将搜索查询精炼到更低的数量后会抛出错误

TypeError: Cannot read property 'firstChild' of null
    at Object._.ug (js?sensor=false:85)
    at new zg (js?sensor=false:87)
    at r.$scope.loadMap (controller.js:208)
    at controller.js:151
    at angular-resource.js:643
    at angular.js:14792
    at r.$eval (angular.js:16052)
    at r.$digest (angular.js:15870)
    at r.$apply (angular.js:16160)
    at g (angular.js:10589)

和第208行是

google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

map_canvas从ng-if获取之前，因为结果超过5000个。

我的问题是如何在执行map_canvas之前恢复loadMap()？

Answer 1

问题是无法知道是否使用摘要循环完成了角度，确保所有元素都已渲染。

要解决此问题，有两个选项

在指令中包装回调函数。在ng-if中包含该指令。只有当你想要执行回调时才使表达式成为真。像
这样的东西
<div ng-if="sectionActivated"> <div ng-init="callBack()"></div> </div>
调用内部的回调函数setTimeOut(function(){ ... }, 0);，因为浏览器默认将所有事件保存在队列中，因此，当摘要循环运行时，您的回调函数将进入队列并尽快执行摘要循环结束了。

在我的情况下，首选解决方案是使用setTimeout，允许我执行不在页面上的地图的一部分或限制在ng-if内的内容。

AngularJS - 在ng-if之后将元素带回DOM

1 个答案: