javascript - 在 AngularJS 回调中使用 $scope

Question

我正在尝试将数据绑定(bind)到回调函数中的 $scope 并将其显示在 html 元素中。

下面是我的 Angular 代码:

gAutocomplete.controller('geocoder', ['gdata', function($scope, gdata){
var geocoder = L.mapbox.geocoder('mapbox.places');
geocoder.query('New York', assign_geocode2());

function assign_geocode2() {
function assign_geocode(err, data) {
    console.log(data);
    $scope.lat = data.latlng[0];
    $scope.lng = data.latlng[1];
    console.log($scope.lat)
}
return assign_geocode;
};

}])

下面是 HTML:

</div>
<div class="spacer50"></div>
<div class="center-block" style="width:600px" ng-cloak data-ng-   controller='geocoder'>
  {{"Chosen lat/long are"}} {{$scope.lat}} {{$scope.lng}}
</div>

我可以看到 Controller 被执行，回调函数被调用，值被写入console.log。但是，它们不会传播到 HTML 元素。可能会发生什么？

更新

我没有像下面那样使用 $timeout 并收到 $timeout 不是函数的错误。我知道我正在使用中间 tmp 变量，但是当我在闭包中使用 $timeout 时，我仍然遇到同样的问题。

gAutocomplete.controller('geocoder', ['$scope', 'gdata', '$timeout',   function($scope, $timeout, gdata) {

    var tmp = {}
    var geocoder = L.mapbox.geocoder('mapbox.places');
    geocoder.query('New York', assign_geocode2(tmp));

    function assign_geocode2(tmp) {
        function assign_geocode(err, data) {
            tmp.lat = data.latlng[0],
            tmp.lng = data.latlng[1]
                        }
        return assign_geocode;
    }

    $timeout(function() {
        $scope.lat = tmp.lat, 
        $scope.lng = tmp.lng, 
            console.log($scope)},0);

}

])

Answer 1

您正在从非 Angular 事件处理程序更改范围值。这意味着您需要通知 Angular:“嘿，我已经更新了内容，请注意”。据我所知，处理此问题的理想方法是在 $timeout 调用中运行回调。

function assign_geocode(err, data) {
    $timeout(() => {
        console.log(data);
        $scope.lat = data.latlng[0];
        $scope.lng = data.latlng[1];
        console.log($scope.lat)
    });
}

在 $timeout 内运行此命令将导致 Angular 运行摘要循环并更新范围值。您不需要从 Angular 发起的事件中执行此操作，因为它已经知道它处于摘要周期中。例如，像 $http 这样的服务会为您处理这个问题。