Ionic Framework: $scope is undefined in simple alert

Question

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

<ion-pane view-title="goal">
   <ion-header-bar class="bar-positive">
      <div class="buttons">
          <a nav-transition="android" class="button button-icon icon ion-arrow-left-b" ng-click="" href="#/index"></a>
      </div>
      <h1 class="title">Add New Goal</h1>
    </ion-header-bar>


    <ion-content class="padding" scroll="false" >
        <div class="list">
            <label class="item item-input">
                <input type="text" placeholder="#Title" ng-model="goaltitle">
            </label>
            <label class="item item-input">
                <span class="hashtag-title">#{{hashtagname}}</span>
            </label>
            <label class="item item-input">
              <textarea placeholder="Goal"></textarea>
            </label>
        </div>
    </ion-content>


    <ion-tabs class="tabs-icon-top tabs-color-active-positive">
        <button class="button button-positive button-bar no-round-corner" ng-click="addNewGoal()">Add Goal</button>
    </ion-tabs>
</ion-pane>

This is my code... I don't know how to explain but it always say undefined when I enter something on the text box...

but $scope.goaltitle = "something" is working on the .controller(); ...

Community · Accepted Answer · 2017-05-23 12:09:54Z

8

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.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 23, 2016 at 12:06

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Manson Mamaril Over a year ago

This worked... but with some changes... alert($scope.model.goaltitle); Thank you very much... :D

Pankaj Parkar Over a year ago

@MansonMamaril obviously that should be that only.. Glad to help you.. Thanks :)

rolinger Over a year ago

Does this method work between controllers? I need to have a div pinned to the top. But the buttons/inputs in that div need to pass data to another controller? Should I just use $rootScope variables in that case or is there another method? Does Ionic v1 have a method to pin a div to the top of the screen - I see in other threads methods like ion-fixed but I think thats specific to Ionic 3x and higher. Not certain though. This would all be a lot easier if there was a v1 method to pin a div.

Konkko · Accepted Answer · 2016-03-23 12:08:14Z

0

For the html

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

JS:

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

answered Mar 23, 2016 at 12:08

Konkko

6624 silver badges15 bronze badges

Collectives™ on Stack Overflow

Ionic Framework: $scope is undefined in simple alert

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related