在隔離範圍內清除表單？

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

 
})