Angularjs视图在Chrome中正确更新，但在Safari中不正确_Angularjs

Angularjs视图在Chrome中正确更新，但在Safari中不正确

angularjs

Angularjs视图在Chrome中正确更新，但在Safari中不正确,angularjs,Angularjs,我只是第一次在Angularjs中进行实验，并得出以下结论。只是为了让每个人都感到困惑，我在用咖啡脚本做这件事我有以下控制器 testApp = angular.module('testme', ['ngRoute']) testApp.config ["$routeProvider", ($routeProvider) -> $routeProvider.when('/', templateUrl: 'invoice_list.html' )

我只是第一次在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>


角度测试

{{invoice.total | currency}
{{发票.病人.全名}
{{（invoice.invoice_date|date:'dd/MM/yy'）|''''}}



残缺的
完成
发送
支付
{{发票计数[类别]}

我试图做的是从服务器（Rails）检索发票列表并显示它们。有4种类型的服务器。当页面首次加载时，在选择框中选择默认选项“不完整”。我的控制器从服务器检索未完成发票的列表，并用它们填充发票数组以供显示。然后，它们将显示在ng视图中，该视图显示按类别过滤的发票列表。我还使用服务器作为键/值对象提供的发票计数更新invoice_count对象（例如“未完成”：15）。此计数将显示在带有“badge”类的量程中。我希望我已经解释得相当清楚了

现在这在Chrome上运行得非常好，我第一次在Angular上实现了一些东西，这让我非常高兴。然后我在Safari中尝试过，但很快就失望了。更改选择选项后，显示发票类别计数的span.badge将消失！只要我以任何方式与页面交互（甚至单击空格），它就会以正确的结果更新。iOS Safari中也会出现这种情况。我自己想不出来。我认为它可能是$scope.$apply（）的东西，但将其添加到控制器中只会导致错误

有什么想法吗？

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

我的徽章计数器实际上显示了我迭代过的数组的

长度

——http更新后，在Safari中数组迭代显示良好，但数组长度徽章仍然没有更新

顺便说一句-如果我检查DOM，我会看到

class=“badge ng binding”

。移除ng绑定（

class=“badge”

）并显示计数器

我的解决方案：我最初实际上是在获取新数据之前删除了数组，以便让更新对用户可见。如果我没有删除JS变量，而是将其设置为空数组，那么badge计数器也可以在Safari中工作

因此，尽量避免删除变量，并尽可能少地更新它们，以实现Safari兼容性

比尔，

Jens

Select在角度上的问题是出了名的，部分原因是跨浏览器渲染的差异。这可能是框架中的一个bug。如果您能生成一个显示差异的最小示例，那么应该在angular issue tracker上发布一个bug。令人失望的是，如果我在第一次使用该框架的冒险中发现了一个bug。