孤立范围内的清晰形式？

Question

我在 ionic 应用程序中有一个用于评论的文本输入，并且在提交表单时需要清除它。

我在离子模态中有表单，所以我假设我成为隔离范围的受害者，但是，表单仍然需要清除..这是我的控制器（我已经标记了我试图清除表单的位置）：

.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。 它从一个新文件加载模态，在你执行addComment它“保存”评论并清除表单： http : //plnkr.co/edit/s6CdQN?p=preview

有关使用点表示法以及为什么应该使用它的更多信息，请参阅以下链接：https ://github.com/angular/angular.js/wiki/Understanding-Scopes 为什么 AngularJS 文档在模型指令？ AngularJS 中范围原型/原型继承的细微差别是什么？

Answer 2

添加 $scope.$apply(); 以及。

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

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