4

在我正在开发的 AngularJS 模块中，我有一个Canvas类定义为：

angular.module("myModule", [])
.factory("Canvas", function() {return Canvas;});

var Canvas = function(element, options) {
    this.width = options.width || 300;
    this.height = options.height || 150;
    this.HTMLCanvas = $(element).get(0);
    this.HTMLCanvas.width = canvas.width;
    this.HTMLCanvas.height = canvas.height;
    this.objects = [];
    //Initialize canvas
    this.init();
}
Canvas.prototype.init = function() {/*...*/};
Canvas.prototype.otherMethod = function() {/*...*/};

现在，Canvas该类永远不会从模块内部实例化，而是从 AngularJS 控制器实例化，如下所示：

angular.module("myApp.controllers", ["myModule"])
.controller("MainCtrl", ["Canvas", function(Canvas) {
    var canvas = new Canvas("#canvas", {/*options object*/});
    //...
}]);

到目前为止，一切都像一个魅力。但是后来我意识到我需要$q画布对象中的服务，并且由于我不想将其注入我的控制器然后将其传递给Canvas构造函数，所以我想像这样修改我的模块：

angular.module("myModule", [])
.factory("Canvas", ["$q", function(q) {
    var that = this;
    that.q = q;
    return function() {
        Canvas.apply(that, arguments);
    };
}]);

var Canvas = function(element, options) {
    console.log(this.q, element, options);
    this.width = options.width || 300;
    this.height = options.height || 150;
    this.HTMLCanvas = $(element).get(0);
    this.HTMLCanvas.width = canvas.width;
    this.HTMLCanvas.height = canvas.height;
    this.objects = [];
    //Initialize canvas
    this.init();
}
Canvas.prototype.init = function() {/*...*/};
Canvas.prototype.otherMethod = function() {/*...*/};

初始console.log正确地记录了$q服务和Canvas的原始参数，element并且options，但在调用其init方法时中断：

TypeError: undefined is not a function

我想那是因为this不再是匿名函数的实例，Canvas而是匿名函数的实例function(q) {...}。
关于如何Canvas使用该属性实例化新对象q并仍然保留类的方法的任何提示？

编辑

我稍微修改了我的代码，以便更好地了解我想要实现的目标：

angular.module("myModule", [])
//.factory("Canvas", function() {return Canvas;})
//.factory("Canvas", ["$q", CanvasFactory])

function CanvasFactory(q) {
    var canvas = this;
    canvas.q = q;
    return function() {
        Canvas.apply(canvas, arguments);
    };
}

var Canvas = function(element, options) {
    console.log(this instanceof Canvas, typeof this.q !== "undefined");
};

如果我取消注释第一个工厂，console.logyield true false，而第二个工厂 yield false true。我的目标是 get true true，这意味着它this实际上是Canvas该类的一个实例并定义了q属性。非常感谢任何提示。

4

2 回答 2

5

我想到了：

angular.module("myModule", [])
.factory("Canvas", ["$q", function(q) {
    Canvas.prototype.q = q;
    return Canvas;
}]);

var Canvas = function(element, options) {
    console.log(this instanceof Canvas, typeof this.q !== "undefined");
};

这记录：true true。

于 2014-08-30T17:22:05.623 回答
1

我像这样创建 Canvas 服务并且正在工作：

var app = angular.module('myModule', []);

app.factory("Canvas", ["$q", function($q) {

    var Canvas = function(element, options) {
        this.q = $q;

        this.init();
        console.log(this.q, element, options);
    }
    Canvas.prototype.init = function() {/*...*/};
    Canvas.prototype.otherMethod = function() {/*...*/};

    return Canvas;
}]);

app.controller('MainCtrl', ['$scope', 'Canvas', function($scope, Canvas) {
    console.log( new Canvas().q );  
}]);

你也可以在 Pluncer 上看到这个

于 2014-08-30T17:04:38.030 回答