AngularディレクティブのjQuery.matchHeightを使用する

jQuery.matchHeightを使用して要素を同じ高さに設定しようとしています。 IはmatchHeightプラグインとjQueryは、index.htmlをAngularディレクティブのjQuery.matchHeightを使用する

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

に含まれている問題は、ディレクティブが適用されているものの、高さが設定されていないことである

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

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

角度指令から関数を呼び出します素子。

出典

2016-10-20 Gert-Jan Kooijmans

jQuery.matchHeight pluginは、配列内のすべての項目をその配列内の最も高い要素の高さに設定します。

match-heightディレクティブは、単一の要素に適用されます。配列がないため、高さは要素に設定されません。

DOM内の親要素にディレクティブを移動し、子要素にクラスが同じを追加すると、高さの設定に必要な配列が得られます。

私はクラスですべての要素にmatchHeight関数を適用するサービスで

<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

、みんながこれをチェックしてください。 https://github.com/christopher-weir/AngularJs-MatchHeight このカスタムディレクティブは正常に動作しています。また、コードベースは非常にシンプルなので、プロジェクトの必要に応じて調整することができます。

出典

2017-03-13 06:04:23

AngularディレクティブのjQuery.matchHeightを使用する

答えて

関連する問題