Angular TypeError cannot read property 'then' of undefined

Question

I have a function named crop

$scope.crop = function (id) {
    var options = {
        template: "templates/polaroids_edit_crop.html",
        url: PolaroidsService.getPolaroid(id).polaroid,
        width: 300,
        height: 300
    };

    $jrCrop.crop(options).then(function (canvas) {
        PolaroidsService.setCropped(id, canvas.toDataURL());
    });
};

But when i call this function i get an error at this line:

$jrCrop.crop(options).then(function (canvas)

which contains:

TypeError: Cannot read property 'then' of undefined
at Scope.$scope.crop (polaroids_edit.js:51)
at $parseFunctionCall (ionic.bundle.js:21044)
at ionic.bundle.js:53458
at Scope.$eval (ionic.bundle.js:23100)
at Scope.$apply (ionic.bundle.js:23199)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53457)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11713)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)
at HTMLDocument.tapTouchEnd (ionic.bundle.js:2975)

The $jrCrop.crop(options) does the following:

crop: function (options) {
    options = this.initOptions(options);

    var scope = $rootScope.$new(true);

    ionic.extend(scope, options);

    $ionicModal.fromTemplateUrl(template, {
        scope: scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        scope.modal = modal;

        return scope.modal.show().then(function () {
            return (new jrCropController(scope)).promise.promise;
        });
    });
}

I have to wait for the template to be loaded and only if it is loadedi can return the modal. How could i solve this?

I would need to see how $jrCrop is defined. If it is a service is it being passed into the controller properly, etc. — Brad Decker
– Brad Decker, Commented Aug 22, 2015 at 12:14
its a factory of an angular module. I guess the problem is the return scope.modal.show() in the then function. but i dont know how to do it otherwise. — Mulgard
– Mulgard, Commented Aug 22, 2015 at 12:15
AngularJs is asynchronous so there really is no concept of blocking and waiting like in many oop languages. Look at the AngularJs docs for promises. Currently your post does not have enough info for me to post solution. — Eric Rohlfs
– Eric Rohlfs, Commented Aug 22, 2015 at 12:21

dfsq · Accepted Answer · 2015-08-22 12:19:50Z

3

I think you should return $ionicModal.fromTemplateUrl result:

crop: function(options) {
    options = this.initOptions(options);

    var scope = $rootScope.$new(true);

    ionic.extend(scope, options);

    return $ionicModal.fromTemplateUrl(template, {
        scope: scope,
        animation: 'slide-in-up'
    }).then(function(modal) {
        scope.modal = modal;
        return scope.modal.show().then(function() {
            return (new jrCropController(scope)).promise.promise;
        });
    });
}

answered Aug 22, 2015 at 12:19

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dfsq Over a year ago

Note return before $ionicModal.fromTemplateUrl.

Collectives™ on Stack Overflow

Angular TypeError cannot read property 'then' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related