각도 지시문에서 jQuery.matchHeight 사용

jQuery.matchHeight를 사용하여 요소를 동일한 높이로 설정하려고합니다. 제가각도 지시문에서 jQuery.matchHeight 사용

angular.module('myApp') 
    .directive('matchHeight', ['$timeout', function ($timeout) { 
    var linkFunction = function(scope, element) { 
     $timeout(function() { 
     angular.element(element).matchHeight(); 
     }); 
    }; 

    return { 
    restrict: 'A', 
    link: linkFunction 
    }; 
}]);

matchHeight 플러그인과 jQuery를가 된 index.html에 포함되는 각도 지시로부터 함수를 호출

<html> 
    <head> 
    all head stuff 
    </head> 
    <body> 

    <div class="row usps"> 
     <div class="col-sm-4 usp-block" ng-repeat="block in content.marketing" match-height> 
     <a href="{{block.link_url}}" class="thumbnail"> 
      // Rest of html 
     </a> 
     </div> 
    </div> 

    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/matchHeight/dist/jquery.matchHeight.js"></script> 

    <script src="scripts/app.js"></script> 
    <script src="scripts/directives/matchheight.js"></script> 
    </body> 
</html>

문제는 지향성이인가되고 있지만, 높이가 설정되지 않는다는 요소.

출처

2016-10-20 Gert-Jan Kooijmans

jQuery.matchHeight plugin은 배열의 모든 항목을 해당 배열에서 가장 높은 요소의 높이로 설정합니다.

일치 높이 지시문은 단일 요소에 적용됩니다. 배열이 없으므로 높이는 요소에 설정되지 않습니다.

DOM에서 부모 요소로 지시문을 이동하고 자식 요소에 동일을 추가하면 높이를 설정하는 데 필요한 배열이 제공됩니다. 서비스에서

<div class="row usps" match-height> 
    <div class="col-sm-4 usp-block equal" ng-repeat="block in content.marketing"> 
    <a href="{{block.link_url}}" class="thumbnail"> 
     // Rest of html 
    </a> 
    </div> 
</div>

나는 동일한 클래스

angular.module('myApp') 
    .directive('matchHeight', ['$timeout', function ($timeout) { 
    var linkFunction = function(scope, element) { 
     $timeout(function() { 
     angular.element(element).find('.equal').matchHeight(); 
     }); 
    }; 

    return { 
     restrict: 'A', 
     link: linkFunction 
    }; 
}]);

출처

2016-10-20 17:45:22

확인이를, 사람들과 함께 모든 요소에 matchHeight 기능을 적용 할 수 있습니다. https://github.com/christopher-weir/AngularJs-MatchHeight 이 맞춤 설정 문이 정상적으로 작동합니다. 또한 코드베이스는 프로젝트가 필요에 따라 조정할 수있는 매우 간단합니다.

출처

2017-03-13 06:04:23

각도 지시문에서 jQuery.matchHeight 사용

답변

관련 문제