Question

我无法使用Foundation Equalizer（JS可以让div达到相同的高度）。

演示本身并不起作用。我正在使用Foundation v6.1.2

所以我在ng-view和索引文件中使用它：

<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中，我只是想让演示工作，即使用代码：

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

为什么这不起作用的任何想法？

由于

Answer 1

您必须创建一个新的均衡器实例才能使其正常工作

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

用法示例

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'));
  }
}

请注意，我将.js-equalizer添加到与data-equalizer属性相同的元素。

您可以在此处阅读文档了解更多信息：https://foundation.zurb.com/sites/docs/equalizer.html

角度 - 基础均衡器不起作用

1 个答案: