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

Question

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

<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(); 

Answer 1

一旦你追加到字符串，需要编译元素以呈现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); 

演示

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); 
 

 
})

<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>