Html 启用通过AngularJS添加新文本的文本区域以滚动

我有一个简单的“类似聊天”的应用程序，其中AngularJS用于将输入和响应附加到聊天区域：

 %div{:id => 'chat-area'}
  %img{:src => '/images/chat-image.png', 'ng-show'=> 'chats.length === 0'}
  %ul
    %li{'ng-repeat'=> 'chat in chats track by $index', 'ng-class'=> 'mainCtrl.getMessageStyle(chat)'} 
      {{chat.user}}: {{chat.message}}

  -#  %p {{newChat}}    
  %input{'type' => 'text', :id => 'type-here-box', 'placeholder' => 'type here or click link on right' , 'ng-model'=>'newChat', 'ng-keyup' => "$event.keyCode == 13 && submitData()"}

  %button{'ng-click' => "submitData()", "style" => "position: absolute; left: -9999px; width: 1px; height: 1px;"}

问题：当“chat in chats”扩展到屏幕底部时，它被

%input

字段隐藏---我希望它做的是滚动

---

如何做到这一点？

您可以为ul设置一个高度，并在CSS中提供overflow:auto

UL的CSS

ul {
   height: 85px;
   overflow: auto;
}

---

演示

这就是您要找的吗@谢谢，让我来check@AnthonyChu--这看起来是应该的，但我不确定如何从示例中部署它…看起来我将scrollglue.js添加到我的站点，然后将指令添加到容器中…确保将

'luegg.directives'

添加为模块依赖项（例如，

angular.module（'myApp'），['luegg.directives']）

@AnthonyChu哦，哇，我错过了！顺便说一句，我使用了haml，所以不确定如何将滚动胶添加到我的div中…你知道吗？只有当内容超出CSSCheck中提到的高度时，滚动才会出现此复选框，并多次单击按钮以添加元素超过内容区域angularjs是否可能使其表现为d不同的是？我不这么认为。你能创建一个为上面生成的HTML和应用于这些元素的样式吗？是的，让我看看我能不能做到