programing

AngularJS: Angular 외부에서 서비스를 업데이트해야 합니다.

newsource 2023. 3. 1. 11:13

AngularJS: Angular 외부에서 서비스를 업데이트해야 합니다.

저는 '플레이어'라는 서비스를 가지고 있는데 플래시 오브젝트 로딩이 끝나면 서비스를 업데이트해야 합니다.

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')

모듈에서 이미 생성된 인스턴스를 업데이트해야 하는 동안 새로운 '플레이어' 인스턴스가 반환됩니다.방법이 있을까요?플레이어의 인스턴스는 1개만 원하지만 Javascript 외부에서 초기화해야 합니다.

글쎄, 네가 뭘 하는지 다 보이진 않지만, 아마 1/2정도 될 거야.

여기 제가 지금 설명하려는 것의 작동 플랭크입니다.

injector.get()앱에 있는 것과 동일한 서비스 인스턴스를 반환해야 합니다.다른 인스턴스가 있다고 생각하게 하는 문제가 발생하고 있는 것일 수도 있습니다.

필요한 것은 다음과 같습니다.

  • 서비스 범위에 넣는 것이 오브젝트 레퍼런스인지 확인합니다.원시 유형인 경우 동일한 참조가 아니므로 업데이트되지 않습니다.
  • 각 요소에서 스코프를 떼어냅니다.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)

기타 의견:

  • 아마 주사하고 싶으실 거예요$windowwindow 객체를 사용하지 않고 서비스로 이행하여 서비스의 테스트 가능성을 유지합니다.
  • 디렉티브는 플래시 무비 플레이어의 작성 등 DOM 조작에 적합합니다.

언급URL : https://stackoverflow.com/questions/13613288/angularjs-i-need-to-update-a-service-from-outside-of-angular