在 AngularJS 中重置 textarea 后 Ng 模型不更新

Question

我一直在為這個問題撓頭一段時間。 我制作了一個 textarea 並使用 ng-model 創建了一個模型。 這一切正常。 我還有一個按鈕，它使用純 Javascript 來重置文本區域。 綁定在我單擊此按鈕的那一刻停止工作，我仍然可以在另一個字段中看到我的文本，但 textarea 是空的。 我在這里重新創建了這個問題Fiddle 。

window.onload = function () {
document.getElementById('btn').onclick = function () {
    document.getElementById('textarea').value = ""; 
};
}; 

我在這里遺漏了什么，或者這不是綁定在 Angular 中的工作方式。 當我開始重新輸入時，它會再次開始“聆聽”並顯示正確的文本。

有人有線索或以前遇到過這個問題嗎？

提前致謝。

Answer 1

這是一個可以滿足您要求的小提琴，但它非常沒有棱角。

http://jsfiddle.net/tk0a5nf1/3/

window.onload = function () {
    document.getElementById('btn').onclick = function () {
        var scope = angular.element(document.getElementById('textarea')).scope();
        scope.txt = "";
        scope.$apply();
    };
};

這是一種更有角度的方法：

http://jsfiddle.net/h4za5ta5/

<div ng-app>
    <textarea id="textarea" ng-model="txt"></textarea>
    <div>{{txt}}</div>
    <button id='btn' ng-click='txt=""'>Reset textarea</button>
</div>

Answer 2

不知道為什么不使用 angular 來重置文本區域。

您可以使用ng-click="txt=''"在控制器中沒有函數的情況下進行重置，但最好這樣做ng-click="reset()" 。

有關演示，請參見下面和這里的jsFiddle 。

 var app = angular.module('myApp', []); app.controller('MainCtrl', ['$scope', function ($scope) { $scope.txt=''; $scope.reset = function() { $scope.txt = ''; }; }]);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script> <div ng-app="myApp"> <div ng-controller="MainCtrl"> <textarea id="textarea" ng-model="txt"> </textarea> <div>{{txt}}</div> <!--<button id='btn' ng-click="txt=''">Reset textarea</button>--> <button id='btn' ng-click="reset()">Reset textarea</button> </div> </div>

Answer 3

Angular 不喜歡 ng-model 的字符串變量，並且根據我的經驗似乎沒有更新它們。 我將變量更改為具有字符串屬性的對象，然后在控制器中初始化該對象。

<textarea id="textarea" ng-model="txt">會變成<textarea id="textarea" ng-model="xyz.text">

在控制器中，我初始化了 xyz。

app.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.xyz = { text: '' };
    
    initialize();

    function initialize() {
        $scope.xyz = { text: '' };
    };
}]);