clear form in isolated scope?

Question

I have a text input for comments in an ionic app and, on form submission, need that to clear.

I have the form inside an ionic modal so I am assuming I am falling victim to an isolated scope, however, the form still needs to be cleared.. here is my controller (I have marked where I am trying to clear the form):

.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(new_comment, comments){
    Easternc.submitComment($scope.eastc.id, new_comment, comments).then(function(data){
      if(data.status=="ok"){
        var user = AuthService.getUser();

        var comment = {
          author: {name: user.data.username},
          content: new_comment,
          date: Date.now(),
          user_gravatar : user.avatar, 
          id: data.comment_id
        };

        $scope.eastc.comments.push(comment);

        $scope.new_comment = ""; // HERE IS WHERE I AM TRYING TO CLEAR THE FORM

        $scope.new_comment_id = data.comment_id;
      }
    });
  };

})

Which version of Angular and Ionic are you using? – Eric Sep 28 '15 at 14:09 — Eric, Sep 28 '15 at 14:09
@Eric ionic v 1.0.0 and angular 1.3.13 – letterman549 Sep 28 '15 at 14:30 — letterman549, Sep 28 '15 at 14:30

score 1 · Accepted Answer · edited May 23 '17 at 12:22

Your suspicion about scope issues is correct although in this case it's because of a child scope not isolated scope.

The easiest (and best) way to fix this is by using the "dot" notation so that the property that you are trying to access and clear will be the same one in the form and in your controller.

So instead of using $scope.new_comment you should create an object and then use that object.

For instance in your controller first set up the values:

$scope.new_comment_form = {
  content: ""
};

Then in your form html you can use

<input type="text" ng-model="new_comment_form.content">

And finally when you want to clear it, just clear the value inside the object:

$scope.eastc.comments.push(comment);

// clear like this
$scope.new_comment_form.content = ""; 

$scope.new_comment_id = data.comment_id;

Here I created a sample working plnkr using the same code outline that you have above. It loads the modal from a new file and after you do addComment it "saves" the comment and clears the form: http://plnkr.co/edit/s6CdQN?p=preview

For more information about using the dot notation and why you should use it, see these links: https://github.com/angular/angular.js/wiki/Understanding-Scopes Why don't the AngularJS docs use a dot in the model directive? What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Worked like a charm! There is obviously much I have to learn! Thank you very much! — letterman549, Oct 02 '15 at 16:59
only fault I am having with my specific setup is that if a user posts a second time then it does not clear the form but going to do some reading on this and will sort it out. — letterman549, Oct 02 '15 at 17:35
There must be some other issue going on, maybe the response is failing and thus the success handler is not being called. You should add a failure handler in case of any errors — JoseM, Oct 02 '15 at 18:27

score 0 · Answer 2 · answered Sep 28 '15 at 14:37

0

Add $scope.$apply(); as well.

We need to $apply the changes in $scope as Easternc.submitComment() is not angular function and hence any changes inside this function is not calling the angular digest cycle to apply changes.

.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(new_comment, comments){
    Easternc.submitComment($scope.eastc.id, new_comment, comments).then(function(data){
      if(data.status=="ok"){
        var user = AuthService.getUser();

        var comment = {
          author: {name: user.data.username},
          content: new_comment,
          date: Date.now(),
          user_gravatar : user.avatar, 
          id: data.comment_id
        };

        $scope.eastc.comments.push(comment);

        $scope.new_comment = ""; // HERE IS WHERE I AM TRYING TO CLEAR THE FORM

        $scope.new_comment_id = data.comment_id;
        
        $scope.$apply(); // Here changes are applied to $scope.
      }
    });
  };

})

answered Sep 28 '15 at 14:37

Neeraj Verma

495
4
17

I have added that however it is still not clearing the form and I am getting the error: **Error: [$rootScope:inprog] $digest already in progress** – letterman549 Sep 28 '15 at 14:41
Please try to put the code to clear the form after submitComment() function, inside $scope.addComment() function. – Neeraj Verma Sep 28 '15 at 14:45
I gave that a try and it is still not clearing the form. I have tried quite a few different variations and cannot seem to get it right – letterman549 Sep 28 '15 at 14:48
When you are calling function $scope.addComment, you have new_comment as parameter how do you get this new_comment parameter?? Are you sure this parameter is inside the current scope?? It will be helpful if you can provide that code as well. – Neeraj Verma Sep 28 '15 at 18:35
the new_comment parameter was suggested in another post because I was having trouble actually submitting the comment inside an isolated scope. So it is just a parameter for my submitComment function in my Easternc factory – letterman549 Sep 29 '15 at 05:52
Since new_comment does not exist inside your current $scope, you can't clear it like $scope.new_comment = ""; you need to put it inside scope or you have to use jquery to clear the new_comment using element id or whatever suits you. – Neeraj Verma Sep 29 '15 at 14:27

clear form in isolated scope?

2 Answers2