Question

我只是第一次在Angularjs进行实验，并取得了以下成果。只是为了混淆我在coffeescript中做的所有人。

我有以下控制器;

testApp = angular.module('testme', ['ngRoute'])

testApp.config ["$routeProvider", ($routeProvider) -> 
    $routeProvider.when('/',
        templateUrl: 'invoice_list.html'
        ).otherwise redirectTo: '/'
]

testApp.controller 'InvoicesController', ($scope, $http, $filter) ->
    $scope.category = 'Incomplete'
    $scope.invoices = []
    $scope.invoice_count = {}
    $scope.$watch 'category', -> #when invoice category select changes
        if !$scope.invoice_count[$scope.category] #unless we have already gotten this category from the server
            $http.get('api/invoices?status=' + $scope.category).success (data) -> #get list of invoices for that category from server
                invoiceList = $scope.invoices.concat data.invoices #add it to the existing array of invoices
                idList = []
                result = []
                invoiceList.forEach (invoice) ->
                    if idList.indexOf(invoice.id) == -1
                        result.push invoice
                        idList.push invoice.id
                $scope.invoices = result #and remove duplicates using invoice.id as indicator of uniqueness
                $scope.invoice_count[$scope.category] = data.meta.counts[$scope.category] #then update invoice_count for the category

这是我视图的简化版本;

<html ng-app='testme'>
  <head>
    <title>angular test</title>
  </head>
  <body ng-controller='InvoicesController'>
    <script id='invoice_list.html' type='text/ng-template'>
      <li class='list-group-item' ng-repeat='invoice in invoices | filter: category:true'>
        <div class='invoice-list-total'>{{invoice.total | currency}}</div>
        <div class='invoice-list-name'>{{invoice.patient.full_name}}</div>
        <div class='invoice-list-date'>{{(invoice.invoice_date | date:'dd/MM/yy') || '&nbsp;'}}</div>
      </li>
    </script>
    <ul class='list-group voffset30'>
      <li class='list-group-item invoice-list-header'>
        <select id="category" name="category" ng-model="category">
          <option value="Incomplete">Incomplete</option>
          <option value="Complete">Complete</option>
          <option value="Sent">Sent</option>
          <option value="Paid">Paid</option>
        </select>
        <span class='badge'>{{invoice_count[category]}}</span>
      </li>
      <div class='ng-view'></div>
    </ul>
  </body>
</html>

我要做的是从服务器（Rails）检索发票列表并显示它们。有4类服务器。首次加载页面时，在选择框中选择默认选项“不完整”。我的控制器从服务器检索不完整的发票列表，并用它们填充发票数组以供显示。然后，它们将显示在ng-view中，该视图显示按类别过滤的发票列表。我还更新invoice_count对象，其中包含服务器作为键/值对象提供的发票计数（例如“不完整”：15）。此计数旨在显示在“徽章”类的范围内。我希望我已经很好地解释了这一点。

现在这在Chrome中完全，我在第一次为Angular实现某些功能时给了我很大的帮助。然后我在Safari中尝试了它并且很快就失望了。更改选择选项后，显示发票类别计数的span.badge消失！只要我以任何方式与页面交互（甚至点击空格），它就会以正确的结果进行更新。这也发生在iOS Safari中。我不能自己解决这个问题。我认为它可能是一个$ scope。$ apply（）的东西，但是将它添加到控制器中只会导致错误。

有什么想法吗？

Answer 1

回答这个问题仅供参考 - 我在Safari中遇到了几乎完全相同的问题 - 在http更新后，徽章不会出现在Safari中。然而，你的JS代码在语法上并不完全相同，但是其他人可能会因为类似的原因找到这个帖子，并且可以找到合适的解决方案。

我的徽章计数器实际显示了我迭代过的数组的length - 在http更新后，数组迭代在Safari中显示正常，但数组长度徽章仍未更新。

Btw - 如果我检查DOM，我会看到class="badge ng-binding"。删除ng-binding（class="badge"）并显示计数器。

我的解决方案：我最初在获取新数据之前实际删除了数组，以便让用户在视觉上更加明显。如果我不是删除JS变量而是将其设置为空数组，那么徽章计数器也可以在Safari中使用。

因此，请尝试避免删除变量，并尽可能少地更新它们以兼容Safari。

BR，延

Angularjs在Chrome中正确查看更新，但在Safari中没有

1 个答案: