AngularJS - ChromeとMozillaでDOMが更新されない

Question

anglejsとangular-ui-bootstrapを使用して、APIから取得したいくつかのデータとテーブルを作成しています。

私のサービスが正しいデータを受け取り、リクエストが正しく構築されていることを確認しました。私のpageChange関数が適切に起動され、最初のページが正常に読み込まれます。

だから私は、次のコントローラの設定があります。

(function() { 
'use strict'; 


initContacts.$inject = ['$scope', '$http']; 

angular.module('app') 
    .config(function ($locationProvider) { 
     $locationProvider.html5Mode(true); 
    }); 

angular.module('app', ['ui.bootstrap']).controller('contactSearchController', initContacts); 

function initContacts($scope, $http) { 

    $scope.contacts = []; 
    $scope.totalItems = 0; 
    $scope.pages = 0; 
    $scope.currentPage = 0; 
    $scope.maxPageLinksShown = 5; 

    if (window.location.hash !== '') { 
     $scope.currentPage = window.location.hash.replace('#', ''); 
    } 

    $http.get("/api/ContactApi/GetPage?pageIndex=" + ($scope.currentPage - 1)).success(function (data) { 

     $scope.contacts = data.Contacts; 
     $scope.totalItems = data.Count; 
     $scope.PageSize = data.Contacts.length; 
     $scope.pages = Math.ceil((data.Count/$scope.PageSize)); 

    }); 

    $scope.pageChanged = function() { 
     $http.get("/api/ContactApi/GetPage?pageIndex=" + ($scope.currentPage - 1)) 
     .success(function (data) { 
      $scope.contacts = data.Contacts; 
     }); 
    }; 
} 

} 

})(); 

をそして、私の見解では私が持っている：

<div ng-app="app" ng-controller="contactSearchController"> 
<table class="table table-striped table-hover contact-search-table"> 
    <thead> 
     <tr> 
      <td class="contact-title"> 
       Titel 
      </td> 
      <td class="department"> 
       Afdeling 
      </td> 
      <td class="name"> 
       Navn 
      </td> 
      <td class="work-phone"> 
       Telefon 
      </td> 
      <td class="mobile"> 
       Mobile 
      </td> 
      <td class="email"> 
       Email 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="(key, value) in contacts"> 
      <td class="contact-title">{{value.Title}}</td> 
      <td class="department">{{value.Department}}</td> 
      <td class="name">{{value.FullName}}</td> 
      <td class="work-phone">{{value.WorkPhone}}</td> 
      <td class="mobile">{{value.WorkMobile}}</td> 
      <td class="email">{{value.Email}}</td> 
     </tr> 
    </tbody> 
</table> 
<div class="col-xs-12 pager-container"> 
    <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" max-size="maxPageLinksShown" class="pagination-sm" boundary-links="true" num-pages="pages"></ul> 
</div> 

さて、これはある程度機能します。

私の問題

ページリンクをクリックし、pageChanged（）関数が呼び出されると、私は、私は私のAPIからデータを取得し、それがすべて正しいだときは、スコープ内のリストには、罰金更新しているように見えます私の見解の表は変わらない。

このソリューションはIEでのみ有効です。 （だれが考えていただろう...）

例外はスローされません。

私はこれが昨日働いていることを誓います。

ご協力いただきありがとうございます。

EDIT私が試した何

：私はすでに「$ダイジェストを得た

$scope.pageChanged = function() { 
    $http.get("/api/ContactApi/GetPage?pageIndex=" + ($scope.currentPage - 1)) 
    .success(function (data) {     
     $scope.$apply(function() { // apply 
       $scope.contacts = data.Contacts; 
     }); 
    }); 
}; 

を：

はそうのように適用されます$の連絡先の割り当てを-Putting進捗状況のエラーが表示されます。

• はそうのようなタイムアウトに適用ラップしてみました：

  $タイムアウト（関数（）{//ここで任意のコードが自動的に適用され、その後の実行を持っています}）;

DOMはまだ更新されません。

Answer 1

わかりましたので、私はそうのようなNGリピート可視化しています方法変更されたものを、このような状況で働いていた：

<tr ng-repeat="contact in getContacts()"> 
      <td class="contact-title">{{contact.Title}}</td> 
      <td class="department">{{contact.Department}}</td> 
      <td class="name">{{contact.FullName}}</td> 
      <td class="work-phone">{{contact.WorkPhone}}</td> 
      <td class="mobile">{{contact.WorkMobile}}</td> 
      <td class="email">{{contact.Email}}</td> 
</tr> 

そして相続人getContacts（）関数：

$scope.getContacts = function() { 
     var data = $scope.contacts; 
     if (data instanceof Array) { 
      return data; 
     } else { 
      return [data]; 
     } 
    } 

を

私は実際にそれがなぜ機能するのか分かりませんが、それはありません。

Answer 2

私は、このような問題を抱えていたと私は$スコープを使用して、それを解決した$適用されます：あなたは$スコープを使用する必要があります$ applyAsyncを代わりに

$scope.pageChanged = function() { 
     $http.get("/api/ContactApi/GetPage?pageIndex=" + ($scope.currentPage - 1)) 
     .success(function (data) {     
      $scope.$apply(function() { // apply 
        $scope.contacts = data.Contacts; 
      }); 
     }); 
    }; 

Answer 3

。。。次のダイジェストサイクルに適用されます。

AngularJSアプリケーションのすべての$スコープを対象にする必要がある場合は、代わりに$ rootScope。$ applyAsyncを使用してください。

Official doc