NivoSlider 不适用于 AngularJS 加载的 base64 图像答案

【问题标题】：NivoSlider isn't working with base64 images loaded by AngularJSNivoSlider 不适用于 AngularJS 加载的 base64 图像
【发布时间】：2014-04-22 11:04:05
【问题描述】：

当我使用带有静态图像的 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="" />

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

【问题讨论】：

src="{{file.content}}" 不起作用。但是 data-ng-src="{{file.content}}" 应该可以工作
它们都没有工作。检查第二个代码段。我同时显示 src 和 ng-src。

标签： angularjs angularjs-ng-repeat nivo-slider

【解决方案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>

（未测试）

【讨论】：