why is scope undefined in angular

Question

So I am using ionic to build a hybrid app. Just to be clear, this works flawlessly with android!

Here is my login html:

<body ng-app="starter">
    <head>
        <script src="phonegap.js"></script>
    </head>
  <ion-header-bar align-title="center" class="bar-positive" ng-controller="BackBtnCtrl">
          <button class="button" ng-click="goBack()"><<</button>
        <h1 class="title">Push Notifications</h1>
  </ion-header-bar>
    <ion-content>
        <div class="list">
        <form style="display: block; margin: 100px">
                <label class="item item-input">
                    <input type="text" ng-model="name" placeholder="Name">
                </label>
                <label class="item item-input">
                    <input type="password" ng-model="password" placeholder="Password" style="text-align: center">
                </label>
                <label class="item item-input">
                    <input type="email" ng-model="email" placeholder="Email" style="text-align: center">
                </label>
                <label class="item item-input">
                    <input type="text" ng-model="company" placeholder="Company Name" style="text-align: center">
                </label>
        <button class="button button-block button-positive" type="submit" ng-click="doLogin()">Register</button>
        </form>
        </div>
    </ion-content>
</body>

Now in my app.js I declare the controller for the ion-content as:

.state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
        controller: 'LoginCtrl'
 })

and when I access, for example, $scope.email in the android app, it returns correctly. But when I access $scope.email in the iOS app, I get undefined. Has anyone ever heard of this issue?

controller:

.controller('LoginCtrl', function($scope, $rootScope, $http, $state, $ionicPlatform) {
    if(window.localStorage.getItem("loggedIn") == undefined || window.localStorage.getItem("loggedIn") == null) {
        // This function only gets called when the register button gets hit. It posts to the server to store the users registration data
        $scope.doLogin = function() {

      if ($scope.name == undefined || $scope.password == undefined|| $scope.email == undefined|| $scope.company == undefined) {
        window.plugins.toast.showWithOptions(
          {
            message: 'Please Fill in ALL Fields',
            duration: 'long',
            position: 'middle'
          });
          alert($scope.email);
          alert("returning");
          return;
      }
      alert($scope.email);

what is that rule? and $scope.email should be the entered text by the user when the application is ran. — Austin Hunter, Oct 04 '16 at 15:28
I misread code since the function wasn't closed and it is so poorly formatted . As for dot watch this 3 minute video https://www.youtube.com/watch?v=DTx23w4z6Kc — charlietfl, Oct 04 '16 at 15:32
I just copy and pasted from text editor to the code insertion here. Sorry for the formatting offending you. Do you know why on iOS that $scope.email is undefined even though text is in the field? — Austin Hunter, Oct 04 '16 at 15:34
when the register button is pressed it calls the doLogin() function. Then it alert($scope.email) which should be the user entered text. But it says undefined on the iOS app. — Austin Hunter, Oct 04 '16 at 15:38
it's not that it offended...it's just hard to read inconsistently formatted or incomplete code. If you have format issues you can use the snippet editor tidy tool — charlietfl, Oct 04 '16 at 15:38
Well the complete code is 350 lines. So I thought I was being good and not overwhelming the page with code by just showing the relevant portion. — Austin Hunter, Oct 04 '16 at 15:40
Can you try adding '{{email}}' in your login.html and check whether it is updating the text? — Gangadhar Jannu, Oct 04 '16 at 15:56
I added {{email}} to my login html just like he did in the linked video above and it is not updating it. Nothing happens as I type. and It is still undefined. — Austin Hunter, Oct 04 '16 at 17:08

score 0 · Answer 1 · answered Oct 04 '16 at 16:54

According to the official Angular documentation, you should declare the controller like this:

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

So, try change your code in the following way:

.controller('LoginCtrl', ['$scope', '$rootScope', '$http', '$state', '$ionicPlatform', function($scope, $rootScope, $http, $state, $ionicPlatform) {
    if(window.localStorage.getItem("loggedIn") == undefined || window.localStorage.getItem("loggedIn") == null) {
        // This function only gets called when the register button gets hit. It posts to the server to store the users registration data
        $scope.doLogin = function() {

      if ($scope.name == undefined || $scope.password == undefined|| $scope.email == undefined|| $scope.company == undefined) {
        window.plugins.toast.showWithOptions(
          {
            message: 'Please Fill in ALL Fields',
            duration: 'long',
            position: 'middle'
          });
          alert($scope.email);
          alert("returning");
          return;
      }
      alert($scope.email);

I made the change. Thank you for the insight on the proper way, but unfortunately it has not fixed my issue. — Austin Hunter, Oct 04 '16 at 17:07
Hi Austin, Can you check this answer http://stackoverflow.com/questions/31988632/ng-model-is-undefined-in-controller — Mohamed Challouf, Oct 04 '16 at 17:22

score 0 · Accepted Answer · answered Oct 04 '16 at 17:30

This might sound absolutely crazy..

First let me thank all the responses. I have learned a lot with how things should be and how I need to fix my code to be 'standard'. Like using . object instead of primitive strings. Thank You.

But I have solved my issue.The thing that was making my fields undefined, was that I had type='email' and if they just entered in something other than an email, it came back undefined. I don't know how, but that fixed it. I changed type='text' and it fixed my issues.

why is scope undefined in angular

2 Answers2