Question

当用户搜索电子邮件时，我正在尝试用Javascript替换某些HTML代码。我有它正常工作，但由于某种原因，错误显示大约20多次，所以它将取代div并说

“用户确实存在用户确实存在用户确实存在用户确实存在用户确实存在用户确实存在”

而不是仅仅输入错误消息一次。知道如何解决它吗？

$scope.checkEmail = function 
findUsersMatchingEmail(emailAddress) {
    ref.child('users').orderByChild('email').
        equalTo($scope.emailAddress).once('value', function (snap) {

        var output = '<div>',
            myError = document.querySelectorAll('#d');
        for (var key in arguments[0]) {
            output += (snap.name() + 
                      (snap.val() === null ? ' Does Not' : ' does') + ' exist');
        }
        output += '</div>';

        for (var i = myError.length - 1; i >= 0; i--) {
            myError[i].innerHTML = output;
        }
    });
};

Answer 1

正如我在评论中写的那样，除了指令的链接功能之外，永远不要操纵DOM。解释为什么可能超出了这个答案的范围，并且已在SO上多次回答。一个非常好的阅读是：

因此，为了简短起见，这是一个非常简单的演示，说明如何处理错误消息。

请注意，这绝不是唯一也是最好的方法。通常可以使用ngMessages或form validation。

(function (app) {
  'use strict';

  app.controller('EmailCtrl', ['$scope', function ($scope) {
    $scope.errors = [];

    $scope.checkEmail = function findUsersMatchingEmail(emailAddress) {
      // clear previous errors
      $scope.errors.length = 0;

      // check email and add errors if needed
      // using your service (ref)
      $scope.errors.push({
        message: 'email not unique ' + (Math.random()) // random is only used to show that the errors actually change
      });
    };
  }]);

})(angular.module('app', []));

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="EmailCtrl">
  <ul>
    <li data-ng-repeat="error in errors">{{ error.message }}</li>
  </ul>

  <form data-ng-submit="checkEmail(email)">
    <input data-ng-model="email" placeholder="email">
  </form>
</div>

旁注：我通常会使用controller as语法，但我不想再介绍任何新主题。

在AngularJS中停止For循环重复

1 个答案: