Ionic Framework: $scope is undefined in simple alert

Question

.controller(\'newGoalCtrl\', function($scope, $ionicPopup) {
    $scope.addNewGoal = function() {
        alert($scope.goaltitle);
    };
});



        

Answer 1

Short Answer

The root cause of this issue is, ion-content does create a prototypically inherited child scope, that's why goaltitle(primitive type) of controller scope is different than the goaltitle you are using on ng-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.

Answer 2

For the html

<input type="text" placeholder="#Title" ng-model="foo.goaltitle">

JS:

$scope.foo = {{
    goaltitle : ''
}}