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中看到。

在初始加载中，尽管执行了console.log('test')，但$scope.loadRandomAlbum(); 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/