Question

我使用angular / bootstrap并且有一个特定的指令，它作为我的应用程序的实际聊天输入框。我已经完成了更重要的扩展行为，除了我无法弄清楚如何做具体的三件事......

1）我需要让enter键在textarea中提交文本（使用表单的按钮是可选的，随意删除它）。我在我的控制台中收到以下错误：＆＃34;未捕获的ReferenceError：$未定义＆＃34; （这里缺乏对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;
     }
});

Answer 1

你没有包含jQuery（这是$ global对象通常在这里的含义）。您可以包含jQuery或使用vanilla JS执行此操作。（更好的是，在Angular指令中使用jqLite！）

这是一个使用普通JS的keyup事件的样子。如果你喜欢传递一个匿名函数，你不必像我一样命名这个函数。我更喜欢命名它们，以便我可以在以后修改它。（我也觉得它更干净）

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

http://jsfiddle.net/k0kyu5t7/

我快速地将它们放在一起，以帮助您了解我在应用程序上下文之外使用vanilla JS的含义。

我注意到第二次看到它时还有一些问题（除了不包括jQuery）：

您应该在textarea元素而不是父div上侦听keydown事件。除非您专门指向文本区域，否则可以捕获您可能不需要的按键事件。
您应该将事件传递给您附加到处理程序的匿名函数回调。

你的＃2答案太宽泛了，无法在这里进行快速讨论。如何在Angular应用程序中组织文件有很多自以为是的方法。我个人喜欢通过组件分解，然后将它们放在像这样的文件夹中。你的聊天指令＆＃34;可以住在[Root] - ＆gt;里面[聊天] - ＆gt; [指令] - ＆gt; chat.js.这只是一种方式。

至于你的＃3，这取决于你想要的东西。您可以从您的指令调用服务/工厂，这也是您的ajax调用的地方。如果您希望您的指令更加模块化，那么一个选项可能是通过指令本身（通过视图）传递方法。

使用angular指令的聊天应用程序的可扩展textarea字段

1 个答案: