javascript - Angular 文本未按预期更新

Question

我有一小段代码来测试我可以用 Angular 做的一些事情，显然当你这样做时什么也做不了。这是 html(正确连接到 Angular 和脚本文件，我确信这一点，因为之前的测试有效并且控制台没有抛出任何错误):HTML:

<div ng-controller='greet'>
    <p>Welcome {{first}}<span id='name' ng-click='addUserName()' title='click to change name'>{{userName}}</span>! This is the <span id='number' ng-click='resetNumber()' ng-attr-title='if you ask, it {{isPrimeNumberView}} a prime number. Click to reset'>{{number}}</span> time you visit the main page</p>
  </div>

JS:

if(!localStorage.number){
    localStorage.number=1;
}else{
    ++localStorage.number;
}
if(!localStorage.userName){
    localStorage.userName='[click]';
}
function greet($scope){
    function addUserName(){
        localStorage.userName=prompt('Name?');
        $scope.userName=localStorage.userName;
        $scope.$apply();
    }
    function resetNumber(){
        localStorage.number=0;
        $scope.number=0;
        $scope.$apply();
    }
    if(localStorage.first){
        $scope.first='back ';
    }else{
        localStorage.first=true;
    }
    $scope.number=localStorage.number;
    $scope.userName=localStorage.userName;
    $scope.isPrimeNumberView='IS';
    var n=localStorage.number;
    if(n==1){$scope.isPrimeNumberView='is not';}
    for(var i=2; i<=Math.sqrt(n); ++i){
        if(n%i==0){$scope.isPrimeNumberView='is not'; i=n;}
    }
}

如果您尝试更改您的姓名，它不会更新它，直到您重新加载页面，如果您单击数字来重置它们，它也不会显示，直到您重新加载页面。这不是 Angular 的典型:有人能告诉我我做错了什么吗？

Answer 1

您的点击事件处理程序在 Angular 的摘要周期之外运行。您需要在更改值后调用 $scope.$apply()。如果您希望它自动工作，请使用 ngClick 绑定(bind)您的处理程序。

此外，您的函数应该声明为 scope 对象的方法。例如:function resetNumber() 应该是 $scope.resetNumber = function()