$scope returns undefined in ionic app

Question

I am wondering at the dual behaviour of $scope. In the below script I am getting value of name as alert. But in my ionic app the same code alerts undefined.

I googled the problem and found this link as a solution where it states that we need to use dot(.) in order to get the value in ng-model. What is the difference between two.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.a =function a(){alert($scope.name);}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name" ng-blur="a()">
</div>

try using $scope.a = function(val){alert(val);} and – MMK Jan 30 '17 at 11:11 — MMK, Jan 30 '17 at 11:11

score 0 · Answer 1 · answered Jan 30 '17 at 10:53

0

Try changing your controller function as below:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.a =function(){
        alert($scope.name);
    }
});

answered Jan 30 '17 at 10:53

daan.desmedt

3,752
1
19
33

No, now it is $scope.a =function a(){alert($scope.name);} ('function a') – daan.desmedt Jan 30 '17 at 11:05

score 0 · Answer 2 · answered Jan 30 '17 at 10:59

0

Actually it does work with Ionic,

angular.module('starter.controllers', [])
.controller('myCtrl', function($scope) {
  $scope.a = function a() {
    alert($scope.name);
  }

})

DEMO

answered Jan 30 '17 at 10:59

Sajeetharan

216,225
63
350
396

I am using `starter.controllers` in my module – sam Jan 30 '17 at 11:04
i dont get what you are saying – Sajeetharan Jan 30 '17 at 11:04
In your answer you asked me to use 'starter.controllers' instead of 'myApp' that is exactly what i am doing – sam Jan 30 '17 at 11:07
@sam that does not matter actually, i have changed and still it works https://plnkr.co/edit/4OFDOQ8frnKczNKAHsZZ?p=preview – Sajeetharan Jan 30 '17 at 11:09
hi @Sajeetharan . Your demo works good. but kindly explain what is the problem from OP code?. – Ramesh Rajendran Jan 30 '17 at 11:11
1

@RameshRajendran There should not be any errror unless the controller gets re instantiated – Sajeetharan Jan 30 '17 at 11:12
I thought this same. I think OP missed something like that. – Ramesh Rajendran Jan 30 '17 at 11:14

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Solution :

"If you use ng-model, you have to have a dot in there."
Make your model point to an object.property and you'll be good to go.

Controller

$scope.formData = {};
$scope.check = function () {
  console.log($scope.formData.searchText.$modelValue); //works
}

Template

<input ng-model="formData.searchText"/>
<button ng-click="check()">Check!</button>

This happens when child scopes are in play - like child routes or ng-repeats. The child-scope creates it's own value and a name conflict is born as illustrated here:

See this video clip for more: https://www.youtube.com/watch?v=SBwoFkRjZvE&t=3m15s .

And that is referred from below links :

Update Solution 1 :

Please declaring the blank object first at the top of your controller:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "";
    $scope.a = function(){alert($scope.name);}
});

I hope these will be helps to you.

But in the above snippet you can see that I am not using 'dot' with ng-model but it still gives the correct output — sam, Jan 30 '17 at 11:02
I think it may be threw the problem for `$parent` and `$child`manipulation. let me know if my all solution is not works to you — Ramesh Rajendran, Jan 30 '17 at 11:07

score 0 · Answer 4 · answered Jan 30 '17 at 12:29

Try to use json object.

  var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.user = {'name':''};
        $scope.a =function a(){alert($scope.user.name);}
    });

 <div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="user.name" ng-blur="a()">
</div>

$scope returns undefined in ionic app

4 Answers4

Solution :

Other Solutions

Update Solution 1 :