Question

我正在学习角度，我试图建立一个表格：

1.on-blur检查属性值是否唯一。

2.如果该值不唯一，则它开始观察该值，并在表单上给出或删除错误作为用户类型。

我个人认为这种方式更加用户友好。键入时不会出现错误，但一旦出现错误，当您更正错误时，错误就会消失。

这是我的代码：

$scope.checkUniqueValue = function(){

    var result = true;

    for(var i=0; i < $scope.users.length; i++ ){

        if($scope.users[i].name === $scope.userName){
            result = false;
            break;
        }
    }

    if(result){
        $scope.error = null;
    }else{
        $scope.error = "name is not unique";

        $scope.$watch( 'userName', function() {

            $scope.checkUniqueValue();

        });

    }

    return result;
};

它的工作方式很好。但是，当我在chrome中打开开发人员工具时，我看到了所有这些错误：

Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22user…ned%22%5D%2C%5B%22userName%3B%20newVal%3A%20%5C%22akbar%5C%22%3B%20oldVal%...<omitted>...5D angular.js:36
Error: [$rootScope:infdig] http://errors.angularjs.org/1.2.21/$rootScope/infdig?p0=10&p1=%5B%5B%22user…me%3B%20newVal%3A%20%5C%22asghar%5C%22%3B%20oldVal%3A%20undefined%22%5D%5D
    at Error (native)
    at http://localhost:8080/bower_components/angular/angular.min.js:6:450
    at k.$digest (http://localhost:8080/bower_components/angular/angular.min.js:110:66)
    at k.$apply (http://localhost:8080/bower_components/angular/angular.min.js:112:173)
    at HTMLInputElement.l (http://localhost:8080/bower_components/angular/angular.min.js:136:370)
    at HTMLInputElement.n.event.dispatch (http://localhost:8080/bower_components/jquery/dist/jquery.min.js:3:6404)
    at HTMLInputElement.r.handle (http://localhost:8080/bower_components/jquery/dist/jquery.min.js:3:3179) angular.js:10023

我想知道是否有人知道这些错误意味着什么以及我在这里做错了什么。因为代码有效，我很难找到导致它的问题。

我也想知道是否有更好的方法将$ watch嵌入if语句中，或者有更好的方法可以在不使用$ watch的情况下解决这个问题。

谢谢

Answer 1

您得到的错误是Infinite $digest Loop（see docs）。

基本上就是这样：

    $scope.$watch( 'userName', function() {
        $scope.checkUniqueValue();
    });

将始终触发摘要循环，并且无论该值是否已更改，手表始终会使用新值进行初始化调用，因此一旦您达到上述代码

        $scope.checkUniqueValue();

将永远被调用，因为没有任何变化你定义另一个手表，它再次调用checkUniqueValue()，这将设置另一个手表......并且循环将继续。

Answer 2

你应该将$ watch移出checkUniqueValue函数，因为它不需要驻留在那里。

$仅在特定事件后观看属性

2 个答案: