Using 'this' as scope when creating $ionicModal

ionic-v1
1

I seem to be having an issue creating an $ionicModal when trying to specify my scope as this instead of $scope.

Since I’m binding everything in my controller via an instance name, I’m not using $scope inside of the controller.

So, I initiate the modal as instructed here:
http://ionicframework.com/docs/api/service/$ionicModal/

and switch out $scope with this

var _this = this
$ionicModal.fromTemplateUrl('my-modal.html', {
    scope: _this,
    animation: 'slide-in-up'
  }).then(function(modal) {
    _this.modal = modal;
  });

When the app runs, I get the following error:

undefined is not a function

and it references the following code in ionic.bundle.js:

var createModal = function(templateString, options) {
    // Create a new scope for the modal
    var scope = options.scope && options.scope.$new() || $rootScope.$new(true);

I even tried assigning another variable to represent this and running it that way, but the same error still prevails …

If I’m not using $scope in my controller, what would be the best way to load a modal while maintaining the usage of this? Is it just not possible or am I missing something?

1 Like
2

This line is presumably trying to create a child scope of the scope you provide or creating a new scope if you don’t provide one. Since you’re not providing a scope but a normal variable, the $new function is not defined (nor anything else that makes it an angular scope I presume).

If you wanted it to work as you describe you might try something like $thisScope = $rootScope.$new(true) and then angular.extend($thisScope, _this). Then pass $thisScope into $ionicModal (completely untested - just a guess).

This big question is though, why are you trying to do this at all? It certainly doesn’t seem like an angular way to do things…

3

Hmm, thanks, I knew this was the case as well (regarding $new), but wasn’t sure how to go about passing it in.

And to answer your last question, it is the angular way of doing things…

I’m using the “controller as” declaration style in my app, more info on that here:
https://docs.angularjs.org/api/ng/directive/ngController

Here’s a plunker I made to recreate the current issue. I’ll update it in there and see if that fixes it:

1 Like
4

That did it, thanks!

5

Nice one. My bad on the controller as syntax. I didn’t realise you could write them like that. Seems like we both learned something!

1 Like
6

Yeah, this is an interesting problem. I still don’t like injecting $rootScope into my controller just for this purpose. Being able to pass a controller reference would seem like the way to go, but it’s not currently possible looking at the source code.

7

You can just use “_this.$scope” and it will work fine. I use controllerAs syntax and use this all over.

8

Hmm, it doesn’t look like it would in this case:

Extending this seems to do the job for now.

9

You just needed a slight modification.

Remember when you use “controller as” what happens is whatever you put as the “as” is attached to the scope. So say you do “MyCtrl as ctrl” $scope.ctrl is created for you.

From experience, if you are going to use controllerAs syntax, stay consistent and try not to mix up attaching items to the “this” and “$scope”. Pick one or the other.

1 Like