角度滚动胶水不适用于聊天应用

时间:2017-04-18 09:40:03

标签: angularjs node.js scroll

我使用棱角胶水滚动到聊天应用程序的底部。但它只适用于发件人网站。接收器风口没有滚动到底部。

 <div id="chat" scroll-glue force-glue>
        <ul id="mychat">
      </ul>
 </div>

聊天功能中的Angularjs代码。

 Sovar myEl = angular.element( document.querySelector( '#mychat' ) );
 myEl.append('<li><strong>' + data.user + ':</strong> ' +data.msg+'</li>');

更新:使用它并且它可以正常工作。

  var myEl = angular.element( document.querySelector( '#mychat' ) );
  myEl.append($compile('<li><strong>' + data.user + ':</strong> ' +data.msg+'</li>')($scope));
  $scope.$apply();

1 个答案:

答案 0 :(得分:0)

一旦附加到字符串,需要编译元素以呈现html。

$scope.data = {"user":"user1", "msg":"this is msg"}
var target = angular.element( document.querySelector( '#mychat' ) ); 
target.append('<li><strong>'+$scope.data.user+':</strong>'+$scope.data.msg+'</li>');
$compile(target)($scope);

演示

&#13;
&#13;
angular.module("app",[])
.controller("ctrl",function($scope,$compile){
$scope.data = {"user":"user1", "msg":"this is msg"}
var target = angular.element( document.querySelector( '#mychat' ) ); 
target.append('<li><strong>'+$scope.data.user+':</strong>'+$scope.data.msg+'</li>');

$compile(target)($scope);

})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div id="chat" scroll-glue force-glue>
        <ul id="mychat">
      </ul>
 </div>
</div>
&#13;
&#13;
&#13;