Angular ng-click cannot get value of ng-model

Question

I am working with a form and I literally just want to get the value from an ng-model. the form looks like this:

<form name="comment_form" class="row" novalidate>
    <div class="col col-80 content col-center">
    <input class="new-comment-message" type="text" style="margin-left: 15px;" placeholder="Leave a comment..." ng-model="new_comment" required></input>
    </div>
    <div class="col col-20 button-container col-center">
    <button class="button button-clear send" type="submit" ng-click="addComment()" ng-disabled="comment_form.$invalid">
        Send
    </button>
    </div>
</form>

This is my whole controller. The end result is to post a comment to wordpress however With my form content returning undefined its a bit difficult. (P.S. its posting to wordpress and the comment is just saying 'undefined'):

.controller('EasternInnerCtrl', function ($http, $timeout, $scope, $ionicLoading, $stateParams, $ionicScrollDelegate, $cordovaSocialSharing, $ionicModal, Easternc, AuthService) {
  $scope.eastc = Easternc.get($stateParams.eastcId);



  $ionicModal.fromTemplateUrl('commenter.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal
  })  

  $scope.openModal = function() {
    $scope.modal.show()
  }

  $scope.closeModal = function() {
    $scope.modal.hide();
  };

  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });




  $scope.addComment = function(){
    $ionicLoading.show({
      template: 'Submiting comment...'
    });
    console.log($scope.new_comment);
    Easternc.submitComment($scope.eastc.id, $scope.new_comment).then(function(data){
      if(data.status=="ok"){
        var user = AuthService.getUser();

        var comment = {
          author: {name: user.data.username},
          content: $scope.new_comment,
          date: Date.now(),
          user_gravatar : user.avatar,
          id: data.comment_id
        };
        console.log($scope.new_comment);
        /*$scope.eastc.comments.push(comment);
        console.log(comment);

        $scope.new_comment = "";
        $scope.new_comment_id = data.comment_id;
        $ionicLoading.hide();
        $ionicScrollDelegate.scrollBottom(true);*/
      }
    });
  };

  $scope.sharePost = function(link){ 
    console.log(link);
    window.plugins.socialsharing.share('I just read this article on blah: ', null, null, url);
  };

})

my console log is showing: undefined when I click send though?

Your code works for me... Does it show 'undefined' when you put console.log directly inside addComment function? — hakazvaka
– hakazvaka, Commented Sep 17, 2015 at 14:25
really?? yeah undefined no matter what I do. I am using this for comments and opening comments in a modal. would that maybe interfere? — letterman549
– letterman549, Commented Sep 17, 2015 at 14:29
The modal probably have an isolated scope. You should provide the whole thing (with the modal logic) — Okazari
– Okazari, Commented Sep 17, 2015 at 14:31
@Okazari I was actually just reading about that. will update the question — letterman549
– letterman549, Commented Sep 17, 2015 at 14:37
@letterman549 Btw, why don't you just pass the comment into the function as parameter ? — Okazari
– Okazari, Commented Sep 17, 2015 at 14:39

Okazari · Accepted Answer · 2015-09-17 14:47:42Z

2

I'm pretty sure the modal got an isolated scope. It means $scope.new_comment wont exists in your controller.

You should try this :

$scope.addComment = function(comment){
    Easternc.submitComment($scope.eastc.id,comment).then(function(data){
        console.log(comment); 
    });
};

with this in your html

<button class="button button-clear send" type="submit" ng-click="addComment(new_comment)" ng-disabled="comment_form.$invalid">
    Send
</button>

Hope it helped.

edited Sep 17, 2015 at 14:47

answered Sep 17, 2015 at 14:42

Okazari

4,5971 gold badge17 silver badges27 bronze badges

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

1 Comment

letterman549 Over a year ago

You are officially awesome! thank you kindly. I will keep that isolated scope thing in mind next time I try get fancy haha.

Collectives™ on Stack Overflow

Angular ng-click cannot get value of ng-model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related