2017-04-18 245 views
0

我正在使用角度膠水滾動到我的聊天應用程序底部。但它只適用於發件人網站。接收器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(); 

回答

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

演示

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>

+0

我用這個和它的工作。但不是這樣。我編輯一些。看看更新。 –

+0

如果在追加後編譯,則不需要再次使用apply函數 –

相關問題