AngularJS - Not able to get value from ng-model to controller

Question

I am trying to use angular's ng-model to store it's value and using ng-click to pass the values to the controller. With my current code, I am always receiving undefined value. What have I done wrong?

HTML

<ion-content>
    <div class="list">
        <label class="item item-input">
            <textarea ng-model="feed.status"></textarea>
        </label>
    </div>
</ion-content>

<div class="tabs tabs-icon-left">
    <a class="tab-item" ng-click="post(feed)">
        <i class="icon ion-arrow-right-b"></i>
    </a>
</div>

JavaScript - Controller

.controller("PostController", function($scope, $http, $localStorage, $location){
    $http.get("https://graph.facebook.com/v2.2/me", { params: { access_token: $localStorage.accessToken, fields: "id, location, picture", format: "json" }}).then(function(result) {
        $scope.profileData = result.data;
        console.log( result.data);
    }, function(error) {
        alert("There is a problem with your profile");
        console.log(error);
    });

    $scope.post = function(data){
        console.log(data);
    }
});

Routes

.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/feeds')

$stateProvider
    .state('login', {
        url: '/',
        templateUrl: 'templates/login.html',
        controller: 'LoginController'
    })
    .state('profile', {
        url: '/profile',
        templateUrl: 'templates/profile.html',
        controller: 'ProfileController'
    })
    .state('feeds', {
        url: '/feeds',
        templateUrl: 'templates/feeds.html',
        controller: 'FeedsController'
    })
    .state('post', {
        url: '/post',
        templateUrl: 'templates/post.html',
        controller: 'PostController'
    })
})

@LionC, I controlled it from the config. Updated my post with my config — Gene Lim, Oct 08 '15 at 08:31
Please use `controller as`syntax. It makes the whole trouble of variables in different scopes so much easier. [And it has a bajilion other advantages](http://stackoverflow.com/questions/32755929/what-is-the-advantage-of-controller-as-in-angular/32756679#32756679) — LionC, Oct 08 '15 at 08:36
As @LionC says, I too believe this has to do with scoping. ion-content directive probably uses an isolated scope. Using controller as syntax will allow you to use something like vm.feed and solve your issue — masimplo, Oct 08 '15 at 08:37
@GeneLim Where's the `feed` property? I don't see it in your controller's source code... — Matías Fidemraizer, Oct 08 '15 at 08:41
@MatíasFidemraizer I sent the property from the a tag's ng-click="post(feed)" — Gene Lim, Oct 08 '15 at 08:42
@GeneLim Yes, but I mean, `feed` should exist in the controller's scope (or parent scope, who knows). — Matías Fidemraizer, Oct 08 '15 at 08:43
@GeneLim Or, is passing a string `"feed"` what you're looking for...? — Matías Fidemraizer, Oct 08 '15 at 08:44
@mxa055 and LionC, I thought the router provider will actually declare those controllers without me assigning in the HTML file? — Gene Lim, Oct 08 '15 at 08:44
@MatíasFidemraizer I am passing the object feed which should carry the value of the textarea — Gene Lim, Oct 08 '15 at 08:45
@GeneLim there are more properties you can use in the UIRouter declaration, specifically controllerAs: 'vm' http://stackoverflow.com/questions/29392293/ui-router-with-controlleras-binding — masimplo, Oct 08 '15 at 08:47
@mxa055 , applying the controllerAs property, and it works like magic! Do create an answer for this for me to be able to accept the answer. — Gene Lim, Oct 08 '15 at 08:53
@GeneLim glad it works now. Was in the process of writing an answer already. Make a habit into using controllerAs syntax as it will make your life a lot easier, also try to use it in your directive controllers if you have any http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html — masimplo, Oct 08 '15 at 09:04

score 3 · Accepted Answer · answered Oct 08 '15 at 08:59

As mentioned in the comments, I believe your issue has to do with scoping. ion-content directive is probably using an isolated scope and thus setting a value inside it will not affect scopes outside it.

A way to overcome such issues (and a lot more) is to use the controller as syntax.

Another reason this might happen is that no one is initialising the feed object. If feed is undefined you cannot just do feed.status = 'sth'. You need to initialise feed first.

Try doing something like:

.state('post', {
        url: '/post',
        templateUrl: 'templates/post.html',
        controller: 'PostController',
        controllerAs: 'vm'
    })

and in your controller:

.controller("PostController", function($http, $localStorage, $location){
    var vm = this;
    vm.feed = {}; //initialise feed object
    $http.get("https://graph.facebook.com/v2.2/me", { params: { access_token: $localStorage.accessToken, fields: "id, location, picture", format: "json" }}).then(function(result) {
        vm.profileData = result.data;
        console.log( result.data);
    }, function(error) {
        alert("There is a problem with your profile");
        console.log(error);
    });

    vm.post = function(data){
        console.log(data);
    }
});

and in your template try:

<div>
<ion-content>
    <div class="list">
        <label class="item item-input">
            <textarea ng-model="vm.feed.status"></textarea>
        </label>
    </div>
</ion-content>

<div class="tabs tabs-icon-left">
    <a class="tab-item" ng-click="vm.post(vm.feed)">
        <i class="icon ion-arrow-right-b"></i>
    </a>
</div>
</div>

And let us know if it works

From what I've read in from your links, controllerAs syntax can really be a great help. Never have used it, but from this moment I will do. Thanks, It works! — Gene Lim, Oct 08 '15 at 09:07
Hi, I have actually found an issue using controllerAs syntax in Ionic. There is currently a bug which can be viewed here. https://github.com/driftyco/ionic/issues/3058 . Temporary solution knwon is controller: 'PostController as vm' . — Gene Lim, Oct 09 '15 at 03:03

score 0 · Answer 2 · answered Oct 08 '15 at 08:35

0

I think your code should work if you wrap everything in ng-controller:

<div ng-controller="MyController">
    <!-- your HTML here -->
</div>

Check it out on JSFiddle: http://jsfiddle.net/gmy6gd8z/

answered Oct 08 '15 at 08:35

slomek

4,873
3
17
16

AngularJS - Not able to get value from ng-model to controller

2 Answers2