angular/ionic - model does not update $scope in controller

Question

I am a newb with angularjs and I am trying something that I believe should be very simple ... but turns out I am not figuring it out.

I have a $scope variable that I want to double bind (using ng-model) to a textarea. I was able to make it work on js fiddle websites but now on my code. I have tried to strip everything down to just a few lines and it still doesn't work, the controller is never updated.

this is my code:

js/main.js

var app=angular
    .module('noclu', ['ionic', 'app.controllers'])
    .config(function ($stateProvider, $urlRouterProvider){
        $stateProvider
                .state('menu.main', {
                    url: "/main",
                    views: {
                        'menuContent': {
                            templateUrl: 'templates/main.html',
                            controller: 'MainCtrl'
                        }
                    }
                });
        $urlRouterProvider.otherwise("/menu/main");
    });

js/controller.js

angular
    .module('app.controllers', [])
    .controller('MainCtrl', function ($scope){
        $scope.src='---';
        $scope.get_feeds=function(){
            //seems like that here "this" is actually the textarea ??
            //$scope.src is always whatever has been set in the controller
            console.log('this:'+this.src);  //this output whatever I enter in the textarea
            console.log('scope:'+$scope.src); //this always output '---'
        };
    });

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <link rel="icon" type="image/png" href="favicon.png">
        <title>NoClu</title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/main.js"></script>
        <script src="js/controllers.js"></script>
    </head>
    <body ng-app="noclu">
    <ion-nav-view></ion-nav-view>
</body>
</html>

template/main.html

<ion-view view-title="NoClu" >
    <ion-content class="padding" id="src-wrapper-center">
        <div ng-class="vertical_center">
            <div id="src-wrapper">
                <div>
                    <div class="padding src-title">What are you in the mood for ?</div>
                    <div class="item" id="src-txt-wrapper">
                        <textarea id="src" ng-model="src"></textarea>
                    </div>
                    <button id="search" class="button button-block button-large button-balanced" ng-click="get_feeds()" >
                        Let's eat
                    </button>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

UPDATE - I made it work, but why ?

I made it work by changing $scope.src='---'; to $scope.src={body:'---'}; and then changing the ng-modal to src.body. but.. WHY did not work the other way as it works for boolean?

see my reply for the "why"

aorfevre
– aorfevre

2015-06-15 16:27:13 +00:00
Commented Jun 15, 2015 at 16:27 — aorfevre
– aorfevre, Commented Jun 15, 2015 at 16:27

aorfevre · Accepted Answer · 2015-06-15 16:26:51Z

3

Using directly $scope. is not a good practice in angularJS. There are various post of it, more concernign $scope inheritence. For exemple : http://learnwebtutorials.com/why-ng-model-value-should-contain-a-dot

Therefore, your need to change your model like that :

$scope.myModel = {};
$scope.myModel.src = "---"

And your html to bind to myModel.src

answered Jun 15, 2015 at 16:26

aorfevre

5,0744 gold badges23 silver badges54 bronze badges

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

2 Comments

Fabrizio Over a year ago

Great, from the article I get that The key here is that ng-switch is a directive that creates a new scope. There are other directives that does this.. so I probably use without knowing it a directive that creates a new scope. Will have to find what those are. THANK YOU for your help

DevlshOne Over a year ago

Angular seems to have issues when local $scope gets too large. Creating objects within the $scope is cleaner and eliminates that issue.

Collectives™ on Stack Overflow

angular/ionic - model does not update $scope in controller

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related