Angular - Foundation Equalizerが動作しない

Foundation Equalizer（divを同じ高さにするJS）を動作させることができません。Angular - Foundation Equalizerが動作しない

デモ自体が機能していません。

<body ng-app="app" ng-controller="Main as main"> 

<ng-view></ng-view> 

<script src="bower_components/jquery/dist/jquery.js"></script> 
<script src="bower_components/foundation-sites/dist/foundation.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.core.js"></script> 
<script src="bower_components/foundation-sites/js/foundation.equalizer.js"></script> 

<script> $(document).foundation(); </script> 

</body>

そしてHTMLに私は取得しようとしている：私は、だから私はNG-ビューで、私が持っているインデックスファイルにそれを使用している財団V6.1.2に

を使用していますデモ作業、つまりコードを使用する：

<div class="row" data-equalizer data-equalize-on="medium" id="test-eq"> 
    <div class="medium-4 columns"> 
    <div class="callout" data-equalizer-watch> 
     <img src= "assets/img/generic/square-1.jpg"> 
    </div> 
    </div> 
    <div class="medium-4 columns"> 
    <div class="callout" data-equalizer-watch> 
     <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p> 
    </div> 
    </div> 
    <div class="medium-4 columns"> 
    <div class="callout" data-equalizer-watch> 
     <img src= "assets/img/generic/rectangle-1.jpg"> 
    </div> 
    </div> 
</div>

これはうまくいかない理由は何ですか？そう

var elem = new Foundation.Equalizer(element, options);

使用例のようにあなたはそれを動作させるためにイコライザーの新しいインスタンスを作成する必要が

おかげ

出典

2016-05-20 userMod2

を私はここにあなたの完全なコードが表示されていないが、私の知識では、基礎スクリプトまたは使用しているすべてのjqueryのスクリプトが角度で動作するようになっていません。これらのスクリプトが準備されている時点では、DOMはまだAngularによって生成されていないためです。基礎スクリプトをDOMより後で読み込ませるには、いくつかのトリックを行う必要があります。別の方法として、同じ機能を実装して代わりに使用するイコライザAngularディレクティブを見つけることができます。（今まで、pineconellc Foundationはこの機能をまだサポートしていません） –

angular.module('app').component('user', { 
    controller: UserController, 
    controllerAs: 'vm', 
    template: ` 
    <div class="row js-equalizer" data-equalizer data-equalize-on="medium" id="test-eq"> 
     <div class="medium-4 columns"> 
     <div class="callout" data-equalizer-watch> 
      <img src= "assets/img/generic/square-1.jpg"> 
     </div> 
     </div> 
     <div class="medium-4 columns"> 
     <div class="callout" data-equalizer-watch> 
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p> 
     </div> 
     </div> 
     <div class="medium-4 columns"> 
     <div class="callout" data-equalizer-watch> 
      <img src= "assets/img/generic/rectangle-1.jpg"> 
     </div> 
     </div> 
    </div> 
    ` 
}); 

function UserController() { 
    const vm = this; 
    vm.$onInit = function() { 
    new Foundation.Equalizer($('.js-equalizer')); 
    } 
}

私はdata-equalizerと同じ要素に.js-equalizerを追加のお知らせ属性。

現在のドキュメントを読むことによって多くを学ぶことができます。https://foundation.zurb.com/sites/docs/equalizer.html

出典

2017-10-23 08:06:21

Angular - Foundation Equalizerが動作しない

答えて

関連する問題