使用angular指令可扩展聊天应用程序的文本区域字段

Expandable textarea field for chat app using angular directive

本文关键字：文本 区域 字段 应用程序 聊天 angular 指令 可扩展 使用      更新时间：2023-09-26

我正在使用angular/bootstrap，并有一个特定的指令，它可以作为我的应用程序的实际聊天输入框。我已经完成了更重要的扩展行为，只是我不太清楚如何在特定的。。。

这是小提琴

1） 我需要让回车键在文本区域内提交文本（使用表单的按钮是可选的，可以随意删除）。我在控制台中收到以下错误："Uncaught ReferenceError:$未定义"（此处缺乏js结构的知识）。

2） 既然我使用的是angular，我应该在哪里包含自定义脚本？可能未在指令中的标记内内联。。。可能在controllers.js内部？最好的做法是什么？

3） 脚本this.form.sendThought();中的ajax调用，能否从脚本中访问controllers.js？我想上面的#2需要在一个地方，这样我就可以访问这个功能。。。

这是指令：

<div class="clear" ng-show="allowInput">
                <form role="form">
                        <div class="input-group">
                            <div class="textarea-container" id="txtCont">
                              <textarea ng-model="rawResponse"></textarea>
                              <div class="textarea-size"></div>
                            </div>
                          <span class="input-group-btn">
                            <button class="btn btn-lg" type="button" ng-click="sendThought()">send</button>
                          </span>
                        </div>
                </form>
</div>

脚本：

var textContainer, textareaSize, input;
var autoSize = function () {
  textareaSize.innerHTML = input.value + ''n';
};
document.addEventListener('DOMContentLoaded', function() {
  textContainer = document.querySelector('.textarea-container');
  textareaSize = textContainer.querySelector('.textarea-size');
  input = textContainer.querySelector('textarea');
  autoSize();
  input.addEventListener('input', autoSize);
});
$('#txtCont').keydown(function() {
    if (event.keyCode == 13) {
        this.form.sendThought();
        return false;
     }
});

您没有包含jQuery（$global对象在这里通常是指jQuery）。您可以包含jQuery，也可以使用vanillaJS来实现这一点。（更好的是，从Angular指令内部使用jqLite！）

以下是使用纯JS的keyup事件的样子。如果你想传递一个匿名函数，你不必像我一样命名函数。我更喜欢命名它们，这样我以后可以根据需要进行修改。（我也认为它更干净）

document.getElementById('chat').onkeyup = keyPressedChat;

http://jsfiddle.net/k0kyu5t7/

我很快就把这些放在一起，帮助你了解我在应用程序上下文之外使用香草JS的意思。

我第二次看它时注意到了更多的问题（除了不包括jQuery之外）：

  1. 您应该监听textarea元素上的keydown事件，而不是父div。除非您特别指向文本区域，否则可能会捕获您可能不想要的keypress事件
  2. 您应该将事件传递到附加到处理程序的匿名函数回调中

你的第二个问题的答案太宽泛了，不适合在这里快速讨论。关于如何在Angular应用程序中组织文件，有很多固执己见的方法。我个人喜欢按组件分解，然后把它们放在这样的文件夹里。你的"聊天指令"可以存在于[Root]->[chat]->[Directives]->chat.js中。这只是一种方式。

至于你的#3，这取决于你在这里想要什么。您可以从指令中调用服务/工厂，无论如何，ajax调用都应该在这里。如果您希望指令更加模块化，那么一种选择可能是通过指令本身（通过视图）传递方法。

相关文章：