1

我正在尝试通过在应用程序启动之前加载所有媒体来初始化应用程序。但是我不太确定如何使用 AngularJS 框架使用 CreateJS 框架来处理预加载。以下不起作用。目标是在显示动画 .gif 时加载所有图像和声音loading_circle_black.gif，然后在所有媒体的加载完成时将其与slide_4.png（或其他）图像文件交换。

相信下面的 AngularJS 控制器正确初始化并显示第一个动画 gif。问题是我应该如何在 html 中对图像进行建模，以便可以交换图像。

JavaScript

ControllerLibrary.prototype.MainStageController = function($scope) {
$scope.imageFile = "loading_circle_black.gif";    
$scope.status = "loading";

var queue = new createjs.LoadQueue();
queue.installPlugin(createjs.Sound);
queue.addEventListener("complete", handleComplete);
queue.loadFile({id: "sound_4", src: "/sounds/slide_4.mp3"});
queue.loadManifest([{id: "slide_4", src: "/img/slide_4.png"}]);

function handleComplete() {
    //createjs.Sound.play("sound_4");
    //var image = queue.getResult("/img/slide_4.png");
    $scope.imageFile = '/img/slide_4.png';
    $scope.status = "complete";
}

HTML

<body style="background-color: black;color: whitesmoke;">
    <div id="main" ng-controller="MainStageController" >
        <center>
            <!--<img id="loadingCircle" src="/img/loading_circle_black.gif"/>-->
            <img ng-src="/img/{{imageFile}}"/>
            <h2>{{status}}</h2>
        </center>
    </div>
</body>
4

1 回答 1

4

很可能对 handleComplete 的调用是在角度上下文之外调用的，因此您需要执行 $scope.$apply()。尝试这个

function handleComplete() {
    $scope.$apply(function() {
       //createjs.Sound.play("sound_4");
       //var image = queue.getResult("/img/slide_4.png");
       $scope.imageFile = '/img/slide_4.png';
       $scope.status = "complete";
    }
});
于 2013-10-03T04:27:40.743 回答