Ionic Framework: $scope is undefined in simple alert
Short Answer
The root cause of this issue is,
ion-content
does create a prototypically inherited child scope, that's whygoaltitle
(primitive type) of controller scope is different than thegoaltitle
you are using onng-model
Ideally practice is to follow dot rule
while defining view model. So that prototypal inheritance rule will get followed with scope hierarchy.
You should define object and then do assign all the ng-model
property in it.
Controller
.controller('newGoalCtrl', function($scope, $ionicPopup) {
$scope.model = {};
$scope.addNewGoal = function() {
alert($scope.model.goaltitle);
};
});
Then have goalTitle
, Goal
, etc. property in it.
Markup
<ion-content class="padding" scroll="false" >
<div class="list">
<label class="item item-input">
<input type="text" placeholder="#Title" ng-model="model.goaltitle">
</label>
<label class="item item-input">
<span class="hashtag-title">#{{hashtagname}}</span>
</label>
<label class="item item-input">
<textarea placeholder="Goal" ng-model="model.Goal"></textarea>
</label>
</div>
</ion-content>
I don't want to re-write whole explanation again, so here I'm referencing similar answer, where I've covered all detailed information.