在隔离范围内清除表单？

Question

我在离子应用程序中有注释的文本输入，并且在表单提交中需要清除。

我有一个离子莫代尔内的形式，所以我假设我成为一个孤立范围的牺牲品，但是，窗体仍然需要清除..这里是我的控制器（我标记了我想清除的位置表格）：

.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

您对范围问题的怀疑是正确的，尽管在这种情况下，它不会因为隔离范围子范围。

解决此问题的最简单（也是最佳）方法是使用“点”符号，以便您试图访问和清除的属性将与窗体中和控制器中的属性相同。

因此，而不是使用$scope.new_comment您应该创建一个对象，然后使用该对象。

比如在你的控制器应首先设定值：

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

然后在你的HTML表单可以使用

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

最后，当你想清楚，只是清除值在对象内部：

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

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

$scope.new_comment_id = data.comment_id; 

在这里我创建了一个示例工作plnkr使用相同的代码outli你有上面的。它从一个新的文件加载模式，你做addComment后，“拯救”的评论和清除表单：http://plnkr.co/edit/s6CdQN?p=preview

有关使用点符号欲了解更多信息，以及为什么你应该使用它，请参阅以下链接： 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

添加$ scope。$ apply（）;以及。

我们需要$应用$ scope中的更改，因为Easternc.submitComment（）不是角函数，因此此函数内的任何更改都不会调用角度摘要循环来应用更改。

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

 
})