NivoSlider不與AngularJS

Question

加載當我使用nivoSlider靜態圖片的base64圖像時，它就像一個魅力：

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

（未測試）