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;
      }
    });
  };

})

Answer 1

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?

Answer 2

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. } }); }; })