javascript - Angularjs ng-show 基于回调

Question

我是 Angular 的新手，所以我可能遗漏了一些东西。

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

Controller 。

$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>

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

Answer 1

每当您在 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.$rootScope.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();

通过始终采用这种方法，您的代码可以轻松转移且可读性强。此外，更少的行并不总是最好的方法。