jquery-mobile - ngClick 添加项目后无法刷新 jquery 移动 ListView

Question

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

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

http://jsfiddle.net/hFj2T/

Answer 1

以下指令对我有用。只需将 list-view 添加到您的 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
  };
});