チャットアプリで角スクロールアタッチメントが動作しない

Question

チャットアプリの下にスクロールするためにアングルグルーを使用しています。しかし、送信側のサイトでのみ動作します。レシーバーウィンドウイングはスクロールを底に出さなかった。

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