ng-if가 참이 된 후에 DOM 요소에 액세스하십시오.

Question

ng-if 속성이있는 div가 있습니다. $http 약속이 성공적으로 해결되면 해당 표현식이 참이됩니다.

div에는 이 포함되어 있으며, 차례로 인 li이 포함되어 있습니다. 목록 항목은 $http 호출에서 반환 한 데이터에서 만들어집니다. ul에는 세로 스크롤 막대가 있습니다.

모든 목록 항목이 생성 된 후에 ul에 스크롤 막대가 있으며 창은 표시되지 않도록 ul의 높이를 조정하려고합니다.

난 그저 할 수있는 기능이 있습니다. 창 크기 조정 이벤트 핸들러에서 호출 될 때 작동합니다. 목록 항목이 생성 된 후 즉시 호출하는 방법을 알 수 없습니다. 어떻게해야합니까?

Answer 1

:

그것은 같은 것을 보일 것 그리고

.directive('adjustHeight', function ($timeout, $window) { 
    function adjustHeight(elem) { 
     // Do stuff - adjust the height 
    } 

    return { 
     restrict: 'A', 
     scope: { 
      data: '=' 
     }, 
     link: function postLink(scope, elem, attrs) { 
      var resizeListener = function (evt) { 
       adjustHeight(elem); 
      }; 

      /* Adjust height on window resize */ 
      $window.addEventListener('resize', resizeListener); 

      /* Adjust height when data changes 
      * (if necessary add an extra property for when being visible) */ 
      scope.$watchCollection('data', function (newValue, oldValue) { 
       if (newValue.length === oldValue.length) { 
        /* Maybe you don't need to re-adjust the height 
        * if the number of elements hasn't changed */ 
        return; 
       } 

       /* Wrapping the function inside a $timeout will ensure that 
       * the code is executed after the next browser rendering 
       * (thus after the modified list has been processed by ngRepeat) */ 
       $timeout(function() { adjustHeight(elem); }); 
      }); 

      /* Make sure to clear the window-resize listener, 
      * once the element is removed */ 
      scope.$on('$destroy', function() { 
       $window.removeEventListener('resize', resizeListener); 
      }); 
     } 
    }; 
}); 

를, 당신은 다음과 같이 사용할 수 있습니다 :

<div ng-if="someCondition" adjust-height data="items"> 
    <ul> 
     <li ng-repeat="item in items">{{item.property}}</li> 
    </ul> 
</div> 

Answer 2

범위를 채우는 것과 동일한 약속으로 함수를 전달할 수 있으며 $timeout으로 묶어야합니다. 내가 그에 대한 지침 만들 것

$http.get('/someUrl').success(function(res){ 
    $scope.data = res; 
    $timeout(resizeFn); 
}); 

Answer 3

내가 가진 Angular2와 동일한 문제 : * ngIf가 true가 된 직후에 jQuery를 사용하여 요소에 도달 할 수 없습니다. 내 주변 둘러보기 :

setTimeout(() => { /* your code */ }, 0); 

코드는 DOM 요소를 사용할 수있게 된 후에 실행됩니다.