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 创建了该图片库，那么它将按您的预期加载。就您而言，我相信您只想修补代码以使其运行。只需更改 last 只需将 $scope.loadRandomAlbum(); 更改为：

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

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