Question

我正在使用angularjs和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！（谁会想到啊......）

没有异常被抛出。

我发誓这是昨天的工作。

非常感谢任何帮助！

修改

我尝试了什么：

- 在$ apply中输入联系人的分配，如下所示：

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

我收到了“$ digest in progress”错误。

尝试将应用程序包装在超时中，如下所示：

$ timeout（function（）{//此处的任何代码随后将自动进行应用运行}）;

摆脱了错误，但DOM仍然无法更新。

Answer 1

我遇到了这样的问题，我使用$ scope解决了这个问题。$ apply：

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

Answer 2

您应该使用$ scope。$ applyAsync。它将应用于下一个摘要周期。

如果您需要定位AngularJS应用程序的所有$范围，请改用$ rootScope。$ applyAsync。

Official doc

Answer 3

好吧那么在这种情况下工作的是改变我可视化ng-repeat的方式：

<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];
        }
    }

我真的不知道为什么会这样，但确实如此。

AngularJS - 在Chrome和Mozilla中未更新DOM

3 个答案: