newTask() TypeError: Cannot call method 'add' of undefined

tutorials
1

I was following the ToDo tutorial, but when i click the New - “newTask()”, getting below error

TypeError: Cannot call method ‘add’ of undefined
at ionic.views.Modal.ionic.views.View.inherit.show (http://localhost/~Srikanth/ionic-0.9.12-alpha/dist/js/ionic.js:3515:25)
at http://localhost/~Srikanth/ionic-0.9.12-alpha/dist/js/ionic-angular.js:24138:44
…

Please help.

2

Hey. I’m guessing the Modal template wasn’t found on the page. Can you share the markup portion of your app so far? Thanks.

3

Hi Max,

I was following the guide “Chapter 4: Building out our App” http://ionicframework.com/docs/guide/building.html

The model template is exist, but $scope.taskModal.show() statement generating error “undefined”

4

I’m getting the same error using the Modal with a Tab Bar.

5

It works, make sure your using ionic-0.9.13-alpha version,

This is easier to show than explain http://mobilewebdeveloper.me/ionic-0.9.13-alpha/examples/starters/todo/

6

I get the same error in 0.9.25, when using a modal loaded from a template file. If I put it in a tag inside index.html, it works.

Does the modal in it’s own template file need to be wrapped in anything besides < div class=‘modal’ >?

Kevin

7

This should be all you need:

Template file: myModal.html

<div class="modal">
  <p>This is a modal</p>
</div>

.controller('MyController', [ '$ionicModal', function($ionicModal) {

    // Load the modal from the given template URL
    $ionicModal.fromTemplateUrl('templates/myModal.html', function($ionicModal) {
        $scope.modal = $ionicModal;

        $scope.modalRightButtons = [
            {
                type: 'button-clear',
                content: 'Close',
                tap: function(e) {
                    $scope.modal.hide();
                }
            }];
    }, {
        // Use our scope for the scope of the modal to keep it simple
        scope: $scope,
        // The animation we want to use for the modal entrance
        animation: 'slide-in-up'
    });

    $scope.openModal = function() {

        $scope.modal.show();

    };

}]);
8

FWIW - I had the same exact problem with v0.9.24.

I found a workaround but the jist of the problem I had is this.

  1. I had a separate file for the modal as illustrated in the post above.
  2. I had a HTML comment at the top of the file.
  3. ionic.js - show function, line 5247 grabs the el and it was coming back as the comment and the line was throwing the error.

Hopefully this helps get a more robust solution into the framework.