Question

我一直在摸索这个问题一段时间了。我创建了一个textarea并使用ng-model创建了一个模型。这很好用。我还有一个使用普通Javascript重置textarea的按钮。绑定在那一刻停止工作我单击此按钮，我仍然可以在另一个字段中看到我的文本，但textarea是emtpy。我在这里重新创建了问题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

不确定为什么不使用角度来重置文本区域。

您可以在控制器中使用ng-click="txt=''"进行重置，但不要像ng-click="reset()"这样做。

有关演示，请参见下文和jsFiddle。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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: '' };
    };
}]);

在AngularJS中重置textarea后，Ng模型没有更新

3 个答案: