Angularjs 在 Chrome 中正确查看更新，但在 Safari 中不正确答案

【问题标题】：Angularjs view updates properly in Chrome but not in SafariAngularjs 在 Chrome 中正确查看更新，但在 Safari 中不正确
【发布时间】：2015-04-16 14:55:34
【问题描述】：

我只是第一次在 Angularjs 中进行试验，并取得了以下成果。只是为了迷惑我在咖啡脚本中所做的每一个人。

我有以下控制器；

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() 的事情，但是将其添加到控制器中只会导致错误。

有什么想法吗？

【问题讨论】：

Select 在角度方面出了名的问题，部分原因是跨浏览器呈现差异。这可能是框架中的错误。如果您可以生成一个显示差异的最小示例，您应该在角度问题跟踪器上发布一个错误。
好的，我会花一些时间在 jsfiddle 上。如果我在第一次使用该框架时发现了一个错误，这很令人失望。

标签： angularjs

【解决方案1】：

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

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

顺便说一句 - 如果我检查 DOM，我会看到 class="badge ng-binding"。移除 ng-binding (class="badge") 就会出现计数器。

我的解决方案：我最初实际上是在获取新数据之前删除了数组，以使更新对用户来说更直观。如果我没有删除 JS 变量，而是将其设置为一个空数组，那么徽章计数器也可以在 Safari 中使用。

所以尽量避免删除变量，并尽可能少地更新它们以兼容 Safari。

br，延斯

【讨论】：