AngularJS

Question

当代码试图访问 DOM 中的一个元素时，我遇到了问题，该元素之前被 ng-if

删除了

该视图的代码如下：

<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 从之前的 DOM 中获取时，因为有超过 5000 个结果。

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

Answer 1

问题是无法知道 angular 是否已完成摘要循环，确保所有元素都已呈现。

要解决这个问题，有两种选择

在指令中包装一个回调函数。将该指令包含在 ng-if 中。并仅当您希望执行回调时才使该表达式为真。像

<div ng-if="sectionActivated"> <div ng-init="callBack()"></div> </div>
在里面调用一个回调函数，setTimeOut(function(){ ... }, 0);因为浏览器默认把所有的事件放在一个队列中，所以当digest loop是运行的时候，你的回调函数会进入摘要循环结束后立即排队并执行。

在我的例子中，首选解决方案是 setTimeout，允许我做一些不属于页面地图的部分或仅限于 ng-if.[=15= 内的事情]

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

AngularJS - bring back element to DOM after ng-if

dom

angular-ng-if