1

アプリの起動前にすべてのメディアをロードして、アプリを初期化しようとしています。ただし、プリロードを処理するためにCreateJSフレームワークを使用してAngularJSフレームワークを使用してこれを行う方法についてはよくわかりません。以下は機能しません。目標は、アニメーション化された .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 に答える