Gagal menyegarkan tampilan daftar seluler jquery setelah item ditambahkan oleh ngClick

Saya mencoba menambahkan item ke tampilan daftar jquery mobile secara dinamis. Saya menambahkan item menggunakan acara ngClick dan menampilkan daftar menggunakan ngRepeat. Saya telah memanggil penyegaran tampilan daftar tetapi item terbaru tidak dapat ditata dengan benar. Acara manakah yang harus saya gunakan untuk menyegarkan dengan benar? Terima kasih.

$scope.addItem = function () {
    $scope.userList.push($scope.userInputText);
    $scope.userInputText = null;
    $("#listview1").listview("refresh");
 }

http://jsfiddle.net/hFj2T/


angularjs jquery-mobile
person cwlaualex    schedule 23.07.2013    source sumber

Jawaban (3)


arrow_upward
3
arrow_downward

Arahan berikut berfungsi untuk saya. Cukup tambahkan tampilan daftar ke tag ul Anda dan juga data-watch="userList" untuk memberi tahu sudut objek mana yang harus diperhatikan perubahannya.

<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
  };
});
person Dustin Butler    schedule 14.12.2014
comment
Bekerja seperti pesona. Terima kasih! - person Chris Aelbrecht; 13.05.2015
comment
Terima kasih ini sangat membantu saya. Bagi siapa pun yang kesulitan agar ini berfungsi, saya harus memastikan daftar saya tidak ada dalam div dengan data-role=controlgroup dan juga memastikan untuk menyetel data-watch dengan benar. - person AKMorris; 13.09.2017

arrow_upward
1
arrow_downward

Hal ini terjadi karena JQuery UI dan Angular mencoba memperbarui DOM menggunakan acara siap dokumen. Kondisi balapan terjadi di mana Angular menambahkan data baru setelah JQuery membuat tampilan daftar. Solusi Sheetal berfungsi karena memaksa JQuery untuk memodifikasi DOM dan membuat tampilan daftar setelah Angular mengisi data.

Solusi lainnya adalah alat yang disebut adaptor sudut seluler jquery

person Bobwise    schedule 21.10.2013

arrow_upward

arrow_downward

person    schedule
comment
Saya sudah mencobanya di biola baru. Ini berhasil tetapi saya ingin tahu apakah ada acara yang lebih baik sehingga saya bisa melakukan penyegaran ini. jsfiddle.net/hFj2T/4 - person cwlaualex; 23.07.2013
comment
Saya belum pernah menggunakan angle.js tetapi menggunakan jquerymobile, di JQM hal ini tidak terjadi dan penyegaran berfungsi secara instan, tidak yakin mengapa ini tidak berhasil dalam kasus ini!!! - person Sheetal; 23.07.2013
comment
Dugaan saya adalah AngularJS belum memperbarui daftarnya saat penyegaran dipanggil. 2 kerangka kerja ini tidak mengetahui pekerjaan pihak lain. - person cwlaualex; 23.07.2013