Ng模型在AngularJS中重置文本区域后未更新

我已经为这个问题挠头一段时间了。我制作了一个文本区域，并创建了一个带有ng模型的模型。这一切都很好。我还有一个按钮，它使用纯Javascript来重置文本区域。当我点击这个按钮时，绑定就停止了，我仍然可以在另一个字段中看到我的文本，但文本区域是emtpy。我在这里重新创建了问题Fiddle。

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

我是不是遗漏了什么，或者这不是Angular中绑定的工作方式。当我开始重新键入时，它会再次开始"侦听"并显示正确的文本。

有人有线索或以前遇到过这个问题吗？

提前谢谢。

这里有一把小提琴，它可以满足你的要求，但它非常不棱角分明。

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>

不确定为什么不使用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>

Angular不喜欢ng模型的字符串变量，根据我的经验，似乎也不会更新它们。我将变量更改为具有字符串属性的对象，然后在控制器中初始化该对象。

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

相关内容

最新更新

热门标签：