ngresource在第一次调用时未发布到服务器

Question

拥有以下ngresource服务

app.factory('CardService', function ($resource) {
    return $resource('/cards/:id', {
        id: '@id'
    }, {
        'update': {method: "PUT"}
    });
});

以下使用此服务的代码

    this.saveSession = function (callback) {
            var thisService = this;

            //acquires the promise to get the snapshot image as data url
            var promise = this.toImage();
            promise.done(function (dataUrl) {
                console.log("promise is called");
                var saveObj = {
                    card_contents: {
                        orientation: thisService.orientation,
                        fold: thisService.card_type,
                        base: thisService.base,
                        content: thisService.canvasItems,
                        snapshot_image: dataUrl
                    }
                };

                if (this.modelInstance == undefined) {
                    console.log("creating new card on server");

                    CardService.save(saveObj, function () {
                        console.log("this is sparta!!");
                        if (callback) {
                            callback();
                        }
                    });
                } else {
                    console.log("updating card on server");
                    this.modelInstance.card_contents = saveObj.card_contents;
                    this.modelInstance.$update({}, function () {
                        if (callback) {
                            callback();
                        }
                    });
                }
            });
        };

app.controller("SaveSessionCtrl", function ($scope, Canvas) {
    $scope.saveCardSession = function () {
        $scope.loading = true;
        Canvas.saveSession();
    }
});

想想，当我通过按钮点击触发saveCardSession时，我得到了以下奇怪的行为。在第一次点击时，CardService.save什么也没做。 （选中网络选项卡和我的服务器）。在第二次单击时，对服务器的调用将触发两次。

知道为什么吗？在这里使用角度和角度资源1.1.5。使用jquery defers和angularjs是否有任何问题可能导致这个问题？

修改 toImage方法如下所示：

this.toImage = function (editorItems, item) {
        var canvasDefer = $.Deferred();

        var stage = new Kinetic.Stage({
            container: 'stage',
            width: 400,
            height: 400
        });
        var layer = new Kinetic.Layer();
        stage.add(layer);
        var imageObj = new Image();
        var thisService = this;

        imageObj.onload = function () {
            var bgImage = new Kinetic.Image({
                x: 0,
                y: 0,
                image: imageObj,
                width: 400,
                height: 400
            });
            layer.add(bgImage);

            //avoid sorting on the actual component array as other stuff may be watching this
            var clonedItems = [];
            var defers = [];

            var loadImgForCanvas = function (index, item) {
                var deferred = $.Deferred();
                var image = new Image();
                image.onload = function () {
                    var userImage = new Kinetic.Image({
                        x: item.x,
                        y: item.y,
                        width: item.width,
                        height: item.height,
                        image: image
                    });

                    if (item.angle) {
                        userImage.rotate(item.angle);
                    }

                    clonedItems[index] = userImage;
                    deferred.resolve();
                }

                image.src = item.blob_url;
                return deferred.promise();
            }

            for (var i = 0; i < editorItems.length; i++) {
                if (editorItems[i].zindex != undefined)
                    clonedItems.push(editorItems[i]);
            }

            //sort by zindex
            clonedItems.sort(function (a, b) {
                a.zindex - b.zindex;
            })

            for (var i = 0; i < clonedItems.length; i++) {
                var component = clonedItems[i];
                if (component.type == "textbox") {
                    var x = component.x;
                    var y = component.y;
                    var w = component.width;
                    var h = component.height;

                    var text = new Kinetic.Text({
                        x: x,
                        y: y,
                        padding: 0,
                        text: component.text.replace(/<br\s*[\/]?>/gi, "\n"),
                        fill: component.fcolor,
                        fontSize: component.size,
                        fontFamily: component.font
                    });

                    clonedItems[i] = text;
                    //layer.add(text);
                } else if (component.type == 'img') {
                    var deferred = loadImgForCanvas(i, component);
                    defers.push(deferred);
                }
            }

            //layer.draw();
            if (defers.length == 0) {
                for (var i = 0; i < clonedItems.length; i++) {
                    layer.add(clonedItems[i]);
                }

                layer.draw();
                stage.toDataURL({
                    callback: function (dataUrl) {
                        canvasDefer.resolve(dataUrl);
                    }
                });
            } else {
                $.when.apply($, defers).then(function () {
                    for (var i = 0; i < clonedItems.length; i++) {
                        layer.add(clonedItems[i]);
                    }

                    layer.draw();
                    stage.toDataURL({
                        callback: function (dataUrl) {
                            canvasDefer.resolve(dataUrl);
                        }
                    });
                });
            }
        };

        imageObj.src = item.front_image;
        return canvasDefer.promise();
    }