8

我是 Angular 新手，所以也许我遗漏了一些东西。

在我的注册表单上，我需要用户的位置。根据他们是否允许/支持 navigator.geolocation，我想显示一个下拉菜单来选择一个位置。

控制器。

$scope.showLoc = true;
if(navigator && navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(pos){
        $scope.showLoc = false;
    },function(err){
        $scope.showLoc = true;
    });
}

和我的表格：

<form class="form-horizontal" name="register"  ng-controller="RegisterCtrl"  ng-submit="registerUser()"> .... 
<div ng-show="showLoc" accesskey="">
    test
</div>
....
 </form>

这种方法对我不起作用。任何见解将不胜感激。

4

1 回答 1

14

每当您在 angularjs 之外执行某种形式的操作时，例如使用 jquery 进行 ajax 调用，或者像此处的示例一样获取地理位置，您都需要让 angular 知道更新自身。我查看了您的 jsfiddle 并将您的一些代码更改为如下所示：

var app = angular.module('myApp', []);
app.controller('RegisterCtrl',function($scope){
     $scope.showLoc = false;   
     navigator.geolocation.getCurrentPosition(function(pos){
             $scope.showLoc = true;
             $scope.$apply();
        },function(err){           
             $scope.showLoc = false;
             $scope.$apply();            
        });
});

现在 showLoc 在更新时更改为 true。这是使用 $apply() 方法的文档http://docs.angularjs.org/api/ng.$ro ​​otScope.Scope#$apply

jsFiddle http://jsfiddle.net/yLFNP/6/

编辑：我的答案已被编辑，但我不同意编辑。虽然您可以将 $apply 方法包装在 $scope.showLoc = false 周围以使其“更短”，但您实际上只保存了 1 个字符（分号）。此外，我更喜欢在一堆逻辑之后使用 $apply 方法，而不是将所有内容都包装在其中。如果我对范围做了更多的事情，你要么必须像这样编写每一个额外的事情：

$scope.$apply($scope.var1 = newValue1);
$scope.$apply($scope.var2 = newValue2);
$scope.$apply($scope.var2 = newValue3);

我觉得有点矫枉过正，或者你可以使用函数方法：

$scope.$apply(function(){
    $scope.var1 = newValue1;
    $scope.var2 = newValue2;
    $scope.var3 = newValue3;
});

或者直接在需要“应用”的代码之后：

$scope.var1 = newValue1;
$scope.var2 = newValue2;
$scope.var3 = newValue3;
$scope.$apply();

通过一直使用这种方法，您的代码很容易转移并且非常易读。此外，更少的线条并不总是最好的方法。

于 2012-12-29T21:02:19.677 回答