이 프로젝트에는 이미지를

Question

UPDATE Plunker 포함되어 있지 않습니다 "미리보기"를 크기를 조정 지침의 크기를 조정 AngularJS와 그리드 필요합니다. 그리드 요소가 모두 같은 크기로 만들어져 제대로 쌓여 있어야합니다. 그리드 요소에 배치 될 때 그리드 요소의 크기를 자동으로 조정하는 angularJs 지시문을 만들었습니다. 내가 나를 위해 이렇게 2 개 지시 한 지침이 : 온로드 지침 2 : imageonload

지침이 개 작품. 그리드 요소가 이미지를 사용하는 경우 이미지가로드 된 후 지시문은 그리드 요소 높이를 다른 모든 그리드 요소로 보내는 이벤트를 트리거합니다. 이벤트를 통해 전송 된 높이가 이벤트를 수신하는 그리드 요소의 높이보다 큰 경우 수신 대기하는 그리드 요소가 높이를 높이로 변경합니다. 이렇게하면 가장 큰 높이가 모든 그리드 요소의 높이가됩니다.

지시문 1이 작동하지 않습니다. 이 요소는 바깥 쪽 대부분의 격자 요소 html 요소에 배치되며 요소로드시 트리거됩니다. 문제는 요소가로드되고 onload 지시어가 호출 될 때 AngularJS가 아직 그리드 요소의 데이터를 채우지 않았기 때문입니다. 결과는 AngularJS 데이터 바인딩 후의 실제 높이가 이벤트로 방송되지 않는다는 것입니다.

내가 생각한 유일한 해결책은 존재하지만 존재하지 않는 이미지에 이미지 URL을 추가하여 그리드 요소에 배치하는 것입니다 (그 중 하나는 공란을 넣기 전에 어떤 이미지도 없었습니다). 그런 다음 onload 대신 imageonload를 호출 할 수 있습니다. 그리고 나는 angularjs 데이터 바인딩이 그때까지 이루어 졌음을 확신합니다.

문제는 꽤 해킹입니다. 차라리 그리드 요소에 이미지가없고 커스텀 onload 지시어를 호출 할 수 있어야하며, angleJS 데이터가 그리드 요소의 모든 데이터 바인딩 변수에 바인딩 한 후 onload 지시문에서 높이를 계산할 수 있어야합니다. 여기

는

.directive('onload', function($rootScope) { 
return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     scope.largestHeight=100; 
     getHeightAndBroadcast(); 
     scope.$on('onLoadEvent', function(caller, value){ 
      var el = angular.element(element); 
      var id = el.prop('id'); 
      var pageName = el.prop('title'); 
      if(pageName == value[0]){ 
       if(scope.largestHeight < value[1]){ 
        scope.largestHeight = value[1]; 
        var height = value[1]; 
        el.height(height); 
       } 
      } 
     }); 
     function getHeightAndBroadcast(){ 
      var el = angular.element(element); 
      var h = el["0"].children; 
      var thumbnailHeightElement = angular.element(h); 
      var pageName = el.prop("title"); 
      var clientHeight = thumbnailHeightElement["0"].clientHeight; 
      var arr = []; 
      arr[0] = pageName; 
      arr[1] = clientHeight; 
      if(clientHeight != undefined) 
       $rootScope.$broadcast('onLoadEvent', arr); 
     } 
    } 
}; 

이}) 여기

중 하나의 예입니다 내 imageonload 지침

.directive('imageonload', function($rootScope) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     scope.heightArray = []; 
     scope.largestHeight = 50; 
     element.bind('load', function() { 
      broadcastThumbnailHeight(); 
     }); 

     scope.$on('imageOnLoadEvent', function(caller, value){ 
      var el = angular.element(element); 
      var id = el.prop('id'); 
      var pageName = el.prop('title'); 
      if(pageName == value[0]){ 
       if(scope.largestHeight < value[1]){ 
        scope.largestHeight = value[1]; 
        var nestedString = el.prop('alt'); 
        if(nestedString == "") 
         nestedString = "1"; 
        var nested = parseInt(nestedString); 
        nested = nested - 1; 
        var inte = 0; 
        var thumbnail = el["0"]; 
        var finalThumbnailContainer = thumbnail.parentElement; 
        while(inte != nested){ 
         finalThumbnailContainer = finalThumbnailContainer.parentElement; 
         inte++; 
        } 
        var innerEl = angular.element(finalThumbnailContainer); 
        var height = value[1]; 
        innerEl.height(height); 
       } 
      } 
     }); 
     scope.$on('findHeightAndBroadcast', function(){ 
      broadcastThumbnailHeight(); 


     }); 
     scope.$on('resetThumbnailHeight', function(){ 
      scope.largestHeight = 50; 


     }); 
     function broadcastThumbnailHeight(){ 
      var el = angular.element(element); 
      var id = el.prop('id'); 
      var alt = el.prop('alt'); 
      if(alt == "") 
       alt = "1"; 
      var nested = parseInt(alt); 
      nested = nested - 1; 
      var pageName = el.prop('title'); 
      var inte = 1; 
      var thumbnail = el["0"]; 
      var finalThumbnail = thumbnail.parentElement; 
      while(inte != nested){ 
       finalThumbnail = finalThumbnail.parentElement; 
       inte++; 
      } 
      var elZero = el["0"]; 
      var clientHeight = finalThumbnail.clientHeight; 
      var arr = []; 
      arr[0] = pageName; 
      arr[1] = clientHeight; 
      $rootScope.$broadcast('imageOnLoadEvent', arr); 
     } 
    } 
}; 

})

그리고 여기 이 내 온로드 지시어 내 imageonload를 사용하는 그리드 요소. 이미지 html 요소의 imageonload 지시문에 유의하십시오. 이 작동합니다. 그리드 요소의 가장 바깥 쪽 html에는 onload 지시어가 있습니다. 그건 작동하지 않습니다. 나는 Firebug에서 이것을 조심스럽게 밟았으며 AngularJS 데이터 바인딩이 완료되기 전에로드가 높이를 계산하는 것을 보았습니다.여기

<div class="thumbnail col-md-3" id="{{product.id}}" title="thumbnailAdminProductsGrid" onload> 
<div class="row"> 
    <div class="containerz"> 
     <div class="row-fluid"> 
      <div class="col-md-2"></div> 
      <div class="col-md-7"> 
       <div class="textcenterinline"> 
        <!--tag--><img class="img-responsive" id="{{product.id}}" title="imageAdminProductsGrid" alt=6 ng-src="{{product.baseImage}}" imageonload/><!--end tag--> 
       </div> 
      </div> 
     </div> 
    <div class="caption"> 
     <div class="testing"> 
      <div class="row-fluid"> 
       <div class="col-md-12"> 
        <h3 class=""> 
         <!--tag--><a href="javascript:void(0);" ng-click="loadProductView('{{product.id}}')">{{product.name}}</a><!--end tag--> 
        </h3> 
       </div> 
      </div> 

      <div class="row-fluid"> 
       <div class="col-md-12"> 
        <p class="lead"><!--tag--> {{product.price}}</p><!--end tag--> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="col-md-12"> 
        <p><!--tag-->{{product.inStock}} units available<!--end tag--></p> 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="col-md-12"> 
        <p class=""><!--tag-->{{product.generalDescription}}<!--end tag--></p> 
       </div> 
      </div> 
      <!--tag--> 
      <div data-ng-if="product.specialized=='true'"> 
       <div class="row-fluid"> 
        <div class="col-md-12" ng-repeat="varCat in product.varietyCategoriesAndOptions"> 
         <b><h4>{{varCat.varietyCategoryName}}</h4></b> 
         <select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions"> 
         </select> 
        </div> 
       </div> 
      </div> 
      <!--end tag--> 
      <div class="row-fluid"> 
       <div class="col-md-12"> 
        <!--tag--><div ng-if="product.weight==0"><b>Free Shipping</b></div><!--end tag--> 
       </div> 
      </div> 


     </div> 
    </div> 
    </div> 
</div> 

만 "온로드"지정되지 "imageonload"

<div class="thumbnail col-md-3" title="thumbnailCouponGrid" onload> 
<div class="innnerContainer"> 

    <div class="text-center"> 
     {{coupon.name}} 
     <br /> 
     <br /> 
     <b>Description</b> 
     <br /> 
     {{coupon.description}} 
     <br /> 
     <br /> 
     <button class="btn btn-large btn-primary" ng-click="goToCoupon()">View Coupon Details</button> 
    </div> 

</div> 

사용 내 격자 요소들 중 하나를위한 HTML의 하나의 예입니다 imageonload 함수는 img html 속성 "alt"를 사용하여 지시문에 신호를 보내기 때문에 imageonload가 가장 바깥 쪽 html 아래에 얼마나 많은 수준으로 배치되어 있는지 약간 혼란스럽게 보일 수 있습니다. 그리드 요소에 대해. 지시어가 새 높이를 설정하는 html 요소를 알 수 있도록이 값을 가져야합니다. 또한 "표제"속성을 사용하여이 표 크기 조절을위한 그리드를 설정합니다. 그리드가 틀리면 동일한 페이지에서 지시문을 여러 번 사용하고 잘못된 그리드에 대한 이벤트는 트리거하지 않을 수 있습니다.

누구든지 그리드 요소에 angularJS 바인딩 후 호출 할 "onload"지시문을 어떻게 얻을 수 있는지 알고 있습니까?

2 개의 이미지가 있습니다 (거의 1처럼 보입니다). 두 번째는 이미지가있는 그리드 요소이며 "imageonload"지시문을 사용하고 첫 번째는 그리드 요소를 포함하는 그리드입니다 이미지를 사용하지 않고 "onload"지시어 만 사용합니다. $timeout 호출 내에서 getHeightAndBroadcast(); 기능을 캡슐화

는

Answer 1

일을 할 것으로 보인다.

이 Plunker 참조하십시오

를 주입 $ 제한 시간

link: function(scope, element, attrs, $timeout) { 

캡슐화 getHeightAndBroadcast(); 기능 : http://plnkr.co/edit/cncatsnFBrYm57tgPKHr?p=preview

그것은 즉, 귀하의 script.js에 작은 추가와 함께 당신의 포크의를 within $timeout 전화

// Use of $timeout with 0 delay fixes function applied before DOM update completion. 
    $timeout(function() { 
     getHeightAndBroadcast(); 
    }, 0, true); 

호핑입니다! 선택적 delay 및 invokeApply 매개 변수없이 $ timeout을 호출 할 수 있습니다.

여기 공식 $ 시간 제한 설명서는 다음과 같습니다 https://docs.angularjs.org/api/ng/service/ $는 바이올린 또는 plunker을 거룩하시기 바랍니다 모든이의 사랑을 위해