2

我正在尝试将项目动态添加到 jquery mobile 的列表视图中。我使用 ngClick 事件添加项目并使用 ngRepeat 显示列表。我已经调用了 listview refresh，但最新的项目无法正确设置样式。我应该使用哪个事件来正确刷新？谢谢。

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

http://jsfiddle.net/hFj2T/

4

3 回答 3

3

以下指令对我有用。只需将列表视图添加到您的 ul 标记以及 data-watch="userList" 以告诉 Angular 哪个对象要监视更改。

<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
  };
});
于 2014-12-14T21:34:46.813 回答
2 
Give a timeout for styling the list view:

 $scope.addItem = function () {

        $scope.userList.push($scope.userInputText);
        $scope.userInputText = null; 

        setTimeout(function(){
            $("#listview1").listview("refresh");
        },100);
    }
于 2013-07-23T06:56:26.193 回答
1

这是因为 JQuery UI 和 Angular 都在尝试使用文档就绪事件更新 DOM。在 JQuery 已经创建列表视图之后，Angular 正在添加新数据的竞争条件正在发生。Sheetal 的解决方案之所以有效，是因为它强制 JQuery 在Angular 填充数据后修改 DOM 并创建列表视图。

另一种解决方案是一个恰当地称为jquery 移动角度适配器的工具

于 2013-10-21T19:32:12.670 回答