Function Not being called in controller ?... using Ionic tabs template

ionic-v1
1

I am new to using angularjs, I started with a blank project and made sure I was able to GET and POST data to mysql db. which I was, I then wanted to use the ionic tabs template for my actual project. how they call the controllers are different then how I did it the first time. I tried debuggin as best I could by placing console.logs to see where it wasnt going and when I click the submit button it goes into the ‘InvoiceCtrl’ but does not seem to be calling the addNewInvoice function in the InvoiceCtrl controller , to post the data. not sure what Im missing here, and I made sure my php file that it is posting to is working correctly.

controller.js

    angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {})


.controller('AccountCtrl', function($scope) {
    $scope.settings = {
        enableFriends: true
    };
})

.controller('OhsCtrl', function ($scope) {
       
})


.controller('InvoiceCtrl', function ($scope, $http) {


    $scope.addNewInvoice = function (add) {
        console.log("in the function");
        var data = {
            firstname: $scope.newInvoice.firstname,
            lastname: $scope.newInvoice.lastname
        }
        $http.post("http://mrbproduktions.com/app/insert.php", { 'firstname': $scope.newInvoice.firstname, 'lastname': $scope.newInvoice.lastname })
            .success(function (data) {
                console.log("damn itwork");
            });
    };
});

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])


.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})


.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

      .state('tab.ohs', {
          url: '/ohs',
          views: {
              'tab-ohs': {
                  templateUrl: 'templates/tab-ohs.html',
                  controller: 'OhsCtrl'
              }
          }
      })

    .state('tab.invoice', {
        url: '/invoice',
        views: {
            'tab-invoice': {
                templateUrl: 'templates/tab-invoice.html',
                controller: 'InvoiceCtrl'
            }
        }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise('/tab/dash');

});

and the tabs-invoice.html

<ion-view view-title="Invoice">
    <ion-content class="padding">
        <div class="list card">
            <div class="item item-divider">Customer Information</div>
            <div class="item item-body">
                    <div class="list">
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">First Name</span>
                            <input type="text" ng-model="InvoiceCtrl.firstname" name="firstname" placeholder="John">
                        </label>
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">Last Name</span>
                            <input type="text" placeholder="Smith" ng-model="InvoiceCtrl.lastname" name="lastname">
                        </label>
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">Address</span>
                            <input type="text" placeholder="123 Main St." ng-model="InvoiceCtrl.address" name="address">
                        </label>
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">City</span>
                            <input type="text" placeholder="City" ng-model="InvoiceCtrl.city" name="city">
                        </label>
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">Zipcode</span>
                            <input type="tel" placeholder="Zipcode" ng-model="InvoiceCtrl.zipcode" name="zipcode">
                        </label>
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">Phone</span>
                            <input type="tel" placeholder="Phone #" ng-model="InvoiceCtrl.phone" name="phone">
                        </label>
                        <label class="item item-input item-stacked-label">
                            <span class="input-label">Email</span>
                            <input type="email" placeholder="johnsmith@gmail.com" ng-model="InvoiceCtrl.email" name="email">
                        </label>
                    </div>
               
            </div>
        </div>
        <div class="button">
            <button data-ng-click="addNewInvoice()" name="add">Submit Invoice</button>
        </div>
</ion-content>
</ion-view>

any help would be appreciated… LOVING IONIC SO FAR

2

I was able to get it to work just fine:

I did remove any references to Ionic, but if you have your project setup, that shouldn’t be necessary. (I was just lazy and didn’t feel like importing ionic libs)

Couple things:

  1. I would recommend separating your controllers into separate files in a folder called “Controllers”. This will make it a lot easier to maintain and locate bugs/issues.

Then in your Controllers folder, you could have :

account.controller.js
invoice.controller.js

Then in each file, at the top make sure you structure it like this:

angular.module('starter.controllers')
  .controller('InvoiceCtrl', function($scope){});

Notice that I didn’t include the [ ] after angular.module(‘starter.controllers’).

  1. In your html, you are using InvoiceCtrl in your ng-model. I’m not sure why you are doing this, but I would avoid it. Just use variable names for your ng-model. You’ll notice how I did it and how you can reference those in your controller.

  2. So there aren’t any errors in the console? I wasn’t able to locate your exact issue unfortuantely, but I’d make sure you instantiate your module, by including

    body ng-app=‘starter’

in your index.html file.

Also, you’ll notice I have ng-controller in my html file, but since you have ui-router, and you define the controller for the view, make sure you remove the ng-controller from the html file.

Sorry I wasn’t able to help you with your exact issue, but I hope this helps you locate it :slight_smile:

3

Would I need to reference them any differntly from the app.js
here???

 .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })

      .state('tab.ohs', {
          url: '/ohs',
          views: {
              'tab-ohs': {
                  templateUrl: 'templates/tab-ohs.html',
                  controller: 'OhsCtrl'
              }
          }
      })

    .state('tab.invoice', {
        url: '/invoice',
        views: {
            'tab-invoice': {
                templateUrl: 'templates/tab-invoice.html',
                controller: 'InvoiceCtrl'
            }
        }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  });
4

Nope, since you are injecting the ‘starter.controllers’ module into your ‘starter’ module, you have access to all of the controllers. Make sure you are including

angular.module('starter')
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

at the top of the file you just showed me.

5

yup thats there ok thanks, any advice on if this is the right way to call teh function?

 <div class="button">
            <button data-ng-click="addNewInvoice()" name="add">Submit Invoice</button>
        </div>
6

Yep. I never include data- with my function calls though.

7

OK thanks, I am going to sleep on it , when I get to work I will change around the controllers to how you suggested and see if i can do any more debuggin, cause I know its not goign within my function $scope.addNewInvoice inside the InvoiceCtrl controller.

i had console.logs , and the one inside my InvoiceCtrl logs but not the one inside the addNewInvoice function

8

Hmm I have a quick question,do I have to change my script declaration in my inedx.html if i change around the controllers like you suggested??

<script src="js/controllers.js"></script>

which is iin my index.html

new paths are js/controllers/different.controllers.js

UPDATE:

I was having extremely hard time seperating the controllers, they werent being loaded , even if i tried loading each controller on each page. So I dedciced to use the link you gave me http://codepen.io/anon/pen/YyRJLN and I only changed the end so that it would actually use post to my insert.php. and it doesNOT work?? !!! Here is my codepen that does not submit anything. http://codepen.io/anon/pen/vNQVVm

ANOTHER UPDATE:

Ok i found the issue had nothing to do with the angular side of thisngs my

was the issue upon removing the class from the div , function ran.
9

Glad you got it working.

To answer your questions:

  1. If you separate the controllers into their own files, you will need to reference each on in the index.html so it would look something like this:

    script src=‘js/controllers/invoice.controller’>
    script src=‘js/controllers/account.controller’>

(For each JS file).