Question

我有一个项目，其中正在向HTML页面呈现记录列表，例如本示例，该示例取自：

https://www.w3schools.com/angular/ng_ng-repeat.asp

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-repeat="x in records">{{x}}</h1>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.records = [
        "Alfreds Futterkiste",
        "Berglunds snabbköp",
        "Centro comercial Moctezuma",
        "Ernst Handel",
    ]
});
</script>

</body>

现在，当静态定义$scope.records时，所有这些都可以正常工作。但是我的问题是我需要从服务调用的REST API中获取记录，例如：

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, myService) {
    myService.getRecords(function(records) {
        $scope.records = records.data;  // An array of records
    });
});
</script>

很显然，当我调用myService.getRecords(...)时，我将其传递给匿名函数作为回调，该函数以延迟的方式执行了asyc。

我记录了records的结果，因此我知道我的通话可以正常进行，并且我的数据是正确的。但是似乎$scope.records不知道它刚刚被更新。

更新：2018.10.10 -找到了！正在寻找它，但找不到任何答案。发布问题后不久，我在两个位置找到了它。

我将在此处发布链接，以作为寻求相同解决方案的任何人的答案。

Answer 1

您需要$scope.$apply的唯一原因是因为您以错误的方式使用angularjs。而且在您的应用中，使用jQuery进行api调用是执行angularjs的错误方法。

使用angularjs $http服务代替使用jQuery。该服务将处理与angularjs范围的同步，并且不会强制您手动使用$scope.$apply()。该服务包含在框架中，因此您唯一需要做的就是将其注入服务中

这是一个例子：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, myService) {
    myService.getRecords().success(function(records) {
        $scope.records = records.data;  // An array of records
    });
});
app.factory('myService', function($http){
    return {
        getRecords: function() {
            return $http.get('yourapi/records');
        }
    };
});

Answer 2

正在寻找它，但是在任何地方都找不到答案。发布问题后不久，我在两个位置找到了它。

我将在此处发布链接，以作为寻求相同解决方案的任何人的答案。

答案是$scope.$apply()

这是一篇很棒的文章：

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

有人在这里有类似的问题：

How can I tell AngularJS to "refresh"

只是不确定为什么在您输入问题时我在列表中没有看到该问答。但是不管...

如何动态更新AngularJS $ scope变量？

2 个答案: