Question

我有一个包含文本区域的简单模态。我的问题是重置textarea的数据。

这是我的模态：

<div class="modal fade" ng-controller="MyCtrl">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <textarea ng-model="content" ng-change="statusChange(content)" placeholder="update" required="required"></textarea>
            </div>
         </div>
         <div class="modal-footer">
             <a class="btn" data-dismiss="modal" aria-hidden="true" ng-click="reset()">
                 Cancel
             </a>
         </div>
    </div>
 </div>

我的控制器：

myApp.controller('MyCtrl', function($scope){
    $scope.content="";

    $scope.statusChange = function(param){
        $scope.content = param;
    }

    $scope.reset = function(){
        $scope.content = "";
    }
})

我的问题：我通过ng-model将textarea中的数据绑定到内容，但是如果我将内容输入到我的文本区域，然后关闭模式，我们会得到$scope.content=""，但是，当我重新打开时在模态中，textarea仍包含先前输入的数据。我可以通过打印出内容数据来确认，文本区域中的数据与$scope.content的值不同。

重新打开模态时，如何强制文本区域具有相同的$scope.content值？

这是问题http://jsfiddle.net/RLQhh/64/的JSFiddle。要查看问题，请打开模式，在textarea中键入内容，然后单击关闭按钮。请注意控制台输出（它应显示您键入的内容，后跟空字符串）。现在重新打开模态，你会看到你输入的最后一件事是textarea中的内容。还要注意然后重新打开窗口，$scope.content中的当前数据显示在控制台中（它是空的）。

Answer 1

您需要将content放入范围内的对象中。

我更新了fiddle并且它有效。而不是$scope.content使用$scope.modal.content。有关详细信息，请参阅this answer。可以找到更详细的解释here，但它基本上与基元在javascript和范围共享中的工作方式有关。

ng-model是一个指令，它创建另一个范围，并将父范围内的属性绑定到文本框的值（或textarea，或select等）。当属性是基元时，它将按值传递，并复制到内部范围。由于对象是通过引用传递的，因此在嵌套属性时这不是问题，因为传递了对对象的引用。

当您直接写入您的内容并重新调整范围时，它会替换（写入）控制器的$ scope值，而不是ng-model指令，并且同步但是，如果你有一个ng-model绑定到一个对象，当你写入内容（在这种情况下是modal.content）时，你正在阅读模态并写入它的内容属性。值被替换，但由于你的ng模型被绑定到模态而不是直接内容，所以绑定没有被破坏（你只读模态，没有写入它）。

关闭模态不会清除textarea数据，但它确实清除了模型

1 个答案: