javascript - Angular 变量未在前端更新

Question

我有一个 AngularJS 应用程序，它运行时没有错误，但只有一个特定的变量传递到前端，但没有更新。我已经在 Controller 中声明、填充并启动了它，但它仍然位于零:

(function () {
 "use strict";
 angular.module("HtJobPortal").controller("JobController", JobController);

    JobController.$inject = ["$scope", "$rootScope"];

    function JobController($scope, $rootScope){      
        var job = this;
        job.global = $rootScope;
        job.pendingCount = 0;
        job.penStr = "http://...";

        job.getPending = function () {
            $.ajax({
                method: "GET",
                crossDomain: true,
                url: job.penStr,
                dataType: "json",
                success: function (data) {
                    job.fillPending(data);
                    job.pendingCount = data.Data.length;
                }
            });
        }

        // Initialise pending and set roles
        job.init = function () {
            job.getPending();
        }
    };
    job.init();
    }
})();

应用程序的其余部分按预期工作，job.fillPending(data);工作时没有错误并创建它应该的表。我在 job.pendingCount = data.Data.length; 上设置了断点这告诉我长度是 1，但这从未反射(reflect)在待处理计数中，待处理计数仍然为零。

HTML 输出为:

<h3>Showing {{job.pendingCount}} Pending Bookings</h3>

如果 Controller 启动时的初始创建变量发生更改，这确实会发生变化。 (编辑:“作业”继续计数的原因是因为 Controller 在附加到模板时有一个别名 <main class="main" ng-controller="JobController as job"> )

Answer 1

事件处理程序被称为“外部”Angular，因此即使您的 $scope 属性发生更改， View 部分也不会更新，因为 Angular 不知道这些更改。

在事件处理程序之后调用 $scope.$apply() 。这将导致运行摘要循环，Angular 将注意到您对 $scope 所做的更改并更新 View 。