AngularJS:我需要从angular外部更新一个服务

Question

我有一个名为"播放器"的服务，当flash对象加载完成时，我需要更新该服务。

mySongPlayer.factory('player', function() {
var isPlayerLoaded = false;
var playerHolder = '';
window.playerReady = function(thePlayer) {
playerHolder = window.document[thePlayer.id];
addListeners();
isPlayerLoaded = true;
}
var flashvars = {
file:"", 
autostart:"true",
skin: "/skins/glow/glow.zip",
}
var params = {
allowfullscreen:"false", 
allowscriptaccess:"always"
}
var attributes = {
id:"player1",  
name:"player1"                    
}
swfobject.embedSWF("/player.swf", "player_placeholder", "100%", "40", "9.0.115", false, flashvars, params, attributes);
var playObj;
return playObj || (playObj = {
currentId: 'test', currentUrl: 'url', playerHolder: ''
});
});​

我知道如何使用访问服务

angular.element(DOMElement).injector().get('player')

但它返回了一个新的"播放器"实例，而我需要更新模块中已经创建的实例。有办法做到这一点吗？我只想要播放器的一个实例，但我需要从外部javascript初始化它。

Answer 1

嗯，我真的看不清你在做什么，但你可能已经做到了一半。

以下是我将要描述的

injector.get()应该返回与应用程序中相同的Service实例。你可能只是看到了一个问题，让你认为你有一个不同的例子。

所以你需要做的是：

• 确保您从服务中放入的是对象引用。如果它是基元类型，它将不是相同的引用，因此不会更新
• 请确保使用angular.element(DOMElement).scope()将角度元素的范围移开，然后在其上调用$apply()

这是代码：

app.controller('MainCtrl', function($scope, myService) {
// Set a var on the scope to an object reference of the
// (or from the) service.
$scope.myService = myService;
});
app.factory('myService', function(){
return {
foo: 'bar'
};
});
//do a little something to change the service externally.
setTimeout(function(){
//get your angular element
var elem = angular.element(document.querySelector('[ng-controller]'));
//get the injector.
var injector = elem.injector();
//get the service.
var myService = injector.get('myService');
//update the service.
myService.foo = 'test';
//apply the changes to the scope.
elem.scope().$apply();
}, 2000)

其他想法：

• 您可能希望将$window注入到服务中，而不是使用窗口对象来维护服务的可测试性
• 指令可能是DOM操作的更好选择，例如创建Flash电影播放器