Question

我不太关注如何注入外部构造函数，我有这个构造函数：

function myAudio(url){
    var song = new Audio();
    song.crossOrigin = "anonymous";
    song.src = url;
    var source  = context.createMediaElementSource(song);
    source.connect(context.destination);

    this.play = function(){
        source.mediaElement.play();
    } 

}

外面，只需使用Javascript即可。我可以使用var myVar = new myAudio("some_url")

创建对象

我想在AngularJS控制器中使用该构造函数，但我无法弄清楚如何操作。

我尝试在控制器中声明它但没有成功

app.controller("myAppCtrl", myMainFunction);
myMainFunction.$inject = ["$interval", "myAudio"];
function myMainFunction($interval, myAudio) {
   scope = this;
   //my controller stuff
}

试图让它返回一个对象，但我找不到正确的方法。

我不知道我错过了什么......

Answer 1

类似的东西

app.factory('MyAudio', function() {
    function MyAudio(url){
        var song = new Audio();
        song.crossOrigin = "anonymous";
        song.src = url;

        this.source = context.createMediaElementSource(song);
        this.source.connect(context.destination);
    }

    MyAudio.prototype.play = function(){
        this.source.mediaElement.play();
    };

    return MyAudio;
});

app.controller("myAppCtrl", myMainFunction);
myMainFunction.$inject = ["$interval", "MyAudio"];
function myMainFunction($interval, MyAudio) {
    this.myAudio = new MyAudio('/some/url.mp3');
    this.myAudio.play();
    // controller stuff
}

Answer 2

将您的课程注册为已注册管理员的服务。

app.service("myAudio", myAudio);

关于服务和注射的总结：https://stackoverflow.com/a/17944367/652669

Answer 3

服务是使用构造函数定义（类似于myAudio）由angular创建的单例。为了注入单例服务，您需要通过使用以下定义告诉angular实例化它：

app.service("myAudio", myAudio);

function myAudio(url){
  var song = new Audio();
  song.crossOrigin = "anonymous";
  song.src = url;
  var source  = context.createMediaElementSource(song);
  source.connect(context.destination);

  this.play = function(){
      source.mediaElement.play();
  } 

}

然后您可以将其注入您的控制器或其他服务中。有关详细信息，请参阅https://docs.angularjs.org/guide/services

在AngularJs控制器中使用外部类

3 个答案: