AngularJS 的 ng-model icm textarea答案

【问题标题】：AngularJS's ng-model icm textareaAngularJS 的 ng-model icm textarea
【发布时间】：2014-05-01 15:21:29
【问题描述】：

我正在尝试在单击按钮后将一些文本添加到最后一个光标位置。

在控制器中：

$scope.addEmoji = function(name){
    var element = $("#chat-msg-input-field");
    element.focus(); //ie
    var selection = element.getSelection();
    var textBefore = $scope.chatMsg.substr(0, selection.start);
    var textAfter = $scope.chatMsg.substr(selection.end);
    $scope.chatMsg = textBefore + name + textAfter;
}               

$scope.updateChatMsg = function(chatMsg){
    $scope.chatMsg = chatMsg;
}

$scope.sendChatMsg = function(){
    var backend = $scope.convs[$scope.active.conv].backend.name;
    $scope.view.addChatMsg($scope.active.conv, $scope.active.user, $scope.chatMsg,new Date().getTime() / 1000, backend);
    Chat[backend].on.sendChatMsg($scope.active.conv, $scope.chatMsg);
    $scope.chatMsg = '';
};

然后是一些 HTML：

<div class="chat-msg-button" >
    <button ng-click="view.toggle('emojiContainer')" ><img src="/apps/chat/img/emoji/smile.png"></button>
</div>
<form id="chat-msg-form" ng-submit="sendChatMsg()">
    <div class="chat-msg-button" >
        <button  type="submit"><div class="icon-play">&nbsp;</div></button>
    </div>
    <div id="chat-msg-input">
        <textarea  id="chat-msg-input-field" autocomplete="off" type="text" ng-model="chatMsg" ng-change="updateChatMsg(chatMsg)" placeholder="Chat message"></textarea>    
        <div>{{ chatMsg }}</div>
    </div>
</form>

我想要实现的目标：用户在 textarea 中键入一些文本 => $scope.chatMsg 获取 textarea 的值。现在用户按下按钮之一 => 按钮的名称被添加到最新的光标位置。（找到最新的光标位置是没有问题的）

问题

div里面$scope.chatMsg、{{ chatMsg }}的值和textarea里面的文字是有区别的。 textarea 和 div 的内容始终保持不变。但是当按下按钮时，名称被添加到$scope.chatMsg，但 textarea 的内容没有改变......

我该如何解决这个问题？ TIA

【问题讨论】：

你能把 jsfiddle 或 plunker 放在一起吗？
plnkr.co/edit/lN7FulBZullRV0TG5y7T?p=preview 即使没有 ng-change，它也能完美运行。我想我必须剥离我的代码....
您的按钮中包含一个 div，并且并不总是在点击时触发
查看我的回答的更新

标签： angularjs textarea

【解决方案1】：

首先，您将 jQuery 与 AngularJS 混合在一起，看起来您在这里并不需要 jQuery。
此外，您的聊天消息会在 3 个不同的函数中更新，因此您需要进行一些调试以查看哪些函数被触发。

一般来说：
要解决您的问题，请尝试更多的调试，做一个

$scope.$watch($scope.chatMsg, function(){
    console.log($scope.chatMsg);
});

这将监视 chatMsg 的所有更改。将 console.log() 添加到您的每个函数中，您就可以看到哪个被触发了。

此外，与其在 div 中使用 {{ }}，不如使用 ng-bind，因为该文本是 div 中唯一的项目，如果您的应用在某个地方崩溃，它会更干净。

// change from
<div>{{ chatMsg }}</div>
// to
<div ng-bind="chatMsg "></div>

更新：在看到你的 plunker 之后，我对其进行了修改并提出了这个：http://plnkr.co/edit/oNKGxRrcweiJafKCm9A5?p=preview

您的 ng-repeat 需要由 $index 跟踪，以便在有人创建相同消息时显示重复而不是崩溃

【讨论】：

嗯，谢谢 :) 使用 getSelection 插件需要 jQuery。我会用你的建议

【解决方案2】：

我解决了所有问题。上面的 plunkr 形式有效。因此，在使用 Angular chrome 扩展调查所有范围之后，我看到 chatMsg 是在另一个范围中定义的。因此不在我试图访问它的范围内。通过这个问题angularJS ng-model input type number to rootScope not updating 我找到了解决方案。我将 chatMsg 添加到 fields 对象中。

【讨论】：