Galleria不會在AngularJS中加載圖像

Question

我有一個如下的腳本

var dummyAlbum = [
    {image: 'http://i.imgur.com/7Osllxil.jpg'},
    {image: 'http://i.imgur.com/YACmI1G.jpg'},
    {image: 'http://i.imgur.com/af4ZDy8.jpg'},
    {image: 'http://i.imgur.com/P5LwCTg.jpg'}
];

function shuffle(o){
    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};
angular.module('MyApp', [])
    .controller('MyController', 
        ['$scope', '$timeout', 
        function($scope, $timeout){
             Galleria.loadTheme('http://cdnjs.cloudflare.com/ajax/libs/galleria/1.3.5/themes/classic/galleria.classic.min.js');
             Galleria.run('#pictures');
             var gallery = $('#pictures').data('galleria');
             $scope.loadRandomAlbum = function(){
                 console.log('test');
                 shuffle(dummyAlbum);
                 gallery.load(dummyAlbum);
             };
             $scope.loadRandomAlbum();
    }]);

完整的腳本可以在此JSFiddle中看到。

在初始加載中， $scope.loadRandomAlbum(); 盡管執行了console.log('test') ，但Galleria不會加載隨機播放的圖像。 但是當我單擊按鈕時，圖庫成功加載了圖像。

我做錯了什么？

Answer 1

首先，您正在混合Angular和Jquery，這是完全錯誤的，您沒有將兩者都混合。

由於jQuery所做的任何事情而導致視圖未更新的原因是AngularJS所不具備的。 請記住：

$digest循環僅考慮在AngularJS的上下文中完成的那些模型更改。

對范圍進行的任何更新都無法更新您的jquery代碼； 並且由於稍后加載，因此不會顯示。 如果您使用ng-src創建了該圖片庫，那么它將按預期加載。 對於您的情況，我相信您只是想對代碼進行修補以使其運行。 只需最后更改只需更改$scope.loadRandomAlbum(); 對此：

setTimeout(function() {
    $scope.$apply(function() {
         $scope.loadRandomAlbum();
         console.log('updated');
    });
}, 250);

這是小提琴： http : //jsfiddle.net/qp76u9km/