Question

当我将nivoSlider与静态图像一起使用时，它就像一个魅力：

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img src="img/someimage.jpg" alt=""/>
    </div>
</div>

当我尝试使用一些动态base64图像（通过AngularJS）加载图库图像时，它不起作用：

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
        <img data-ng-repeat="file in files" src="{{file.content}}" alt="" />
        <!-- or -->
        <img data-ng-repeat="file in files" data-ng-src="{{file.content}}" alt="" />
    </div>
</div>

在分离的内容中使用data-ng-repeat正在运作

<img data-ng-repeat="file in files" data-ng-src="{{file.content}}" alt="" /> 
<!-- or -->
<img data-ng-repeat="file in files" data-ng-src="{{file.content}}" alt="" />

我做错了什么？谢谢大家!!!

Answer 1

您必须制定一个指令，为您初始化nivo滑块。类似的东西：

angular.module('myApp').directive('nivoSlider', function () {
  return {
    link: function ($scope, elem) {
      $scope.$apply(function () {
        $(elem).nivoSlider();
      }
    }
  };
});

模板：

<div class="slider-wrapper">
  <nivo-slider id="slider" class="nivoSlider">
    <img data-ng-repeat="file in files" data-ng-src="{{file.content}}" alt="" />
  </nivo-slider>
</div>

（未经测试）

NivoSlider不使用AngularJS加载的base64图像

1 个答案: