Question

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

下面是我的角度代码：

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>

我可以看到控制器被执行，调用回调函数并将值写入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

您正在从非角度事件处理程序更改范围值。这意味着你需要通知角度，嘿，我已经更新了东西，请注意，＃34;。 AFAIK理想的处理方式是在$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等服务会为您解决此问题。

Answer 2

Scope是应用程序控制器和视图之间的粘合剂。在模板链接阶段，指令在作用域上设置$ watch表达式。 $ watch允许指令通知属性更改，这允许指令将更新的值呈现给DOM。

...
{{"Chosen lat/long are"}} {{lat}} {{lng}}
...

示例： http://plnkr.co/edit/5TJJkYf21LlwPyyKjgTv?p=preview

https://docs.angularjs.org/guide/scope

在AngularJS回调中使用$ scope

2 个答案: