如何使用AngularJS＆CreateJS预加载图像

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

相信下面的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>

来源

2013-10-03 Guido Anselmi

极有可能到handleComplete呼叫被称为角范围之外，所以你需要做的$范围。$适用（）。试试这个

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-03 04:27:40 Chandermani

谢谢Chandermani。如果你有时间，你能解释一下$ scope.apply（）的调用情况吗？ –

对角度上下文以外的模型数据所做的任何更改都需要反馈回ugugular，以便它可以更新绑定。看到这也http://jimhoskins.com/2012/12/17/angularjs-and-apply.html – Chandermani

再次感谢Chandermani。那篇文章很有帮助。 –

如何使用AngularJS＆CreateJS预加载图像

回答

相关问题