2017-11-17 13 views
0

내가 문제로 가지고 다음과 같습니다AngularJS와 - 후 DOM에 요소를 다시 가져 겨-경우 코드가 해당 뷰에 대한 <code>ng-if</code></p> <p>코드에 의해 전에 이륙 한 DOM의 요소에 도달하려고 할 때

$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 다음 결과와 정제 검색 쿼리에 도달 한 후 보이는 효과

<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> 

및 컨트롤러 부분 이 오류

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) 

을 발생 ount 라인 208 map_canvas가 5000 개 이상의 결과가 있었다 전과 DOM에서 ng-if하여 찍은

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

이다.

제 질문은 을 어떻게 다시 얻을 수 있습니까? loadMap()이 실행 된 것입니까?

+1

컨트롤러에서지도 옵션을 가져 와서지도를 렌더링하는 지시문을 작성해야한다고 생각합니다. 이런 식으로 지시문은'ng-if' 섹션이 파괴/생성 될 때 파괴되거나 생성 될 것이기 때문에 컨트롤러에서 DOM을 만질 필요가 없습니다. –

답변

0

각도가 다이제스트 루프로 수행되는지 여부를 알 수 없으므로 모든 요소가 렌더링되도록 보장 할 수 없습니다.

이 문제를 해결하기 위해 두 가지 옵션
  1. 지시문에서 콜백 함수가 있었다. 해당 지침을 ng-if에 포함하십시오. 귀하의 콜백을 실행하려는 경우에만 해당 표현식을 true로 만듭니다. 기본적으로 브라우저는 큐에있는 모든 이벤트를 지킬

    <div ng-if="sectionActivated"> <div ng-init="callBack()"></div> </div>

  2. 전화 내부 콜백 함수와 같은 뭔가, setTimeOut(function(){ ... }, 0);는 실행 루프를 소화 할 때 따라서, 콜백 함수는 큐를 입력하고 즉시 실행하세요 다이제스트 루프가 끝났습니다. 내 경우 선호하는 솔루션에

나를 페이지에있는지도의 일부가 아닌 또는 ng-if 내부에있는 제한 일을 할 수 setTimeout로했다.

+0

정말 좋은 이유가없는 한 컨트롤러에서 무엇이 렌더링되었는지 알아 내려고해서는 안됩니다. 귀하의 문제는 DOM 조작 논리가 잘못된 위치에 있다는 것을 의미합니다. –