$ scope在嵌套函数中不可访问

时间:2014-08-21 05:49:23

标签: javascript angularjs angularjs-scope

我正在尝试为angularjs中的地理位置构建服务,但是我想先在我的控制器中试一试,然后将其移出。现在,当我得到我的position.coords.latitude /经度值时,我无法访问$ scope变量。

有人可以向我解释为什么它无法访问?我没有javascript的深入知识,但是因为父变量由于某种原因无法访问吗?什么是解决这种限制的好方法?

我正在标记这个javascript,因为我不确定这是一个语言设计特征还是我只是因为我失明而遗失的东西。

我确实看到了控制台的lat / long打印,所以我知道我得到了有效的数据。

//geolocation.js

angular.module('myapp', [])
    .controller('MyController', ['$scope',
        function($scope) {
            if ("geolocation" in navigator) {
                var watchID = navigator.geolocation.watchPosition(function(position) {
                    $scope.latitude = position.coords.latitude;
                    $scope.longitude = position.coords.longitude;
                    console.log($scope.latitude);
                    console.log($scope.longitude);
                }, function() {}, {
                    enableHighAccuracy: true,
                    maximumAge: 30000,
                    timeout: 27000
                });
            } else {
                /* geolocation IS NOT available */
            }
        }
    ]);

//index.html
<!doctype html>
<html ng-app="myapp">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js">
    </script>
    <script src="geolocation.js">
    </script>
</head>

<body ng-controller="MyController">
    Hello
    <div>
        <p>{{latitude}}</p>
        <p>{{longitude}}</p>
    </div>
</body>

</html>

好的,我添加了

$ $范围应用($ scope.latitude);

在console.log之后,但仍然在函数中。

经纬度更新。我只尝试了一个vanilla $ scope。$ apply();但那没有做任何事情。我想这是第一种方式,所以我会坚持下去。

我已更新到$ scope.coords = position.coords和现在$ scope。$ apply($ scope.coords);

在html中我正在做{{coords.latitude}}和经度等,它运行正常。

对任何有兴趣的人。此外,我打算转向一项服务,不确定这将如何发挥作用。

2 个答案:

答案 0 :(得分:2)

嗯,您看到值打印到控制台,因此您知道您实际上正在访问$scope变量。您只是没有碰巧看到HTML中的更改,对吗?您没有看到这些更改,因为angular不知道范围正在更改。简短的回答是,您需要使用$apply将更改包装到范围内,让角度知道它们正在被更改。

以下是您可能会觉得有用的相关答案:How do I use $scope.$watch and $scope.$apply in AngularJS?

答案 1 :(得分:0)

好的,首先猜测你在设置标量值时会遇到角度范围原型链的臭名昭着/讨厌的陷阱。许多人对此感到惊讶,它是well documented。尝试使用嵌套的子属性$scope.coords$scope.coords.latitude重构代码,使$scope.coords.longitude成为对象(对修复至关重要)。可能发生的情况是您的子范围正在隐藏标量latitude属性,因此父范围无法访问/查看它。