ฉันกำลังพยายามเพิ่มรายการลงใน listview ของ jquery mobile แบบไดนามิก ฉันเพิ่มรายการโดยใช้เหตุการณ์ ngClick และแสดงรายการโดยใช้ ngRepeat ฉันเรียกการรีเฟรช listview แล้ว แต่รายการล่าสุดไม่สามารถจัดรูปแบบได้อย่างถูกต้อง ฉันควรใช้เหตุการณ์ใดเพื่อรีเฟรชอย่างถูกต้อง? ขอบคุณ.
$scope.addItem = function () {
$scope.userList.push($scope.userInputText);
$scope.userInputText = null;
$("#listview1").listview("refresh");
}
คำสั่งต่อไปนี้ใช้ได้กับฉัน เพียงเพิ่ม list-view ให้กับแท็ก ul ของคุณและ data-watch="userList" เพื่อบอกเชิงมุมว่าวัตถุใดที่ควรระวังการเปลี่ยนแปลง
<ul list-view data-watch="userList" data-role="listview" data-filter="true" >
<li ng-repeat="user in userList">{{user.name}}</li>
</ul>
app.directive('listView', function () {
var link=function(scope, element, attrs) {
$(element).listview();
scope.$watchCollection(attrs.watch, function() {
$(element).listview("refresh");
});
};
return {
restrict: 'EA',
scope:false,
link: link
};
});
สิ่งนี้เกิดขึ้นเนื่องจากทั้ง JQuery UI และ Angular กำลังพยายามอัปเดต DOM โดยใช้เหตุการณ์พร้อมเอกสาร สภาพการแข่งขันเกิดขึ้นโดย Angular กำลังเพิ่มข้อมูลใหม่หลังจากที่ JQuery ได้สร้าง listview แล้ว โซลูชันของ Sheetal ใช้งานได้เนื่องจากบังคับให้ JQuery แก้ไข DOM และสร้าง listview หลังจาก Angular ได้เติมข้อมูลแล้ว
อีกวิธีหนึ่งคือเครื่องมือที่เรียกว่า jquery mobile Angular adapter
