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(); Galleria不会加载混洗后的图像，尽管执行了console.log('test')。但是当我点击按钮时，图库成功加载了图像。

我做错了什么？

Answer 1

首先，你正在混合Angular和Jquery，这是完全错误的，你不要混合它们。

因为Jquery正在做的事情，你的视图没有被更新的原因是AngularJS＆＃39;知识。请记住：

$digest周期将只考虑在AngularJS上下文中完成的那些模型更改。

对作用域进行的任何更新都无法更新您的jquery代码;并且由于稍后加载，它不会被显示。如果您使用ng-src创建了该图库，那么它将按预期加载。在您的情况下，我相信您只是想修补您的代码以便它运行。只需更改最后一次只需将$scope.loadRandomAlbum();更改为：

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

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

Galleria不会在AngularJS中加载图像

1 个答案: