Question

我正在关注异步表格验证和ngMessages的Moo年教程（我使用的是1.3.0-beta.14，因此我无法使用实际的$async验证器）。< / p>

我的验证工作正常，但视图中的范围不存在！在表单提交时，没有username值，并且在视图中的其他位置添加适当的{{username}}绑定永远不会返回值。但是，我的指令末尾的控制台日志确实返回了正确的值，它只是从不转移到视图？

这是指令，基本上从文章中提取（console.log在最终return之前从视图中记录正确的值）：

.directive('recordAvailabilityValidator', function($http) {

  return {
    require : 'ngModel',
    link : function(scope, element, attrs, ngModel) {
      var apiUrl = attrs.recordAvailabilityValidator;

      function setAsLoading(bool) {
        ngModel.$setValidity('recordLoading', !bool);
      }

      function setAsAvailable(bool) {
        ngModel.$setValidity('recordAvailable', bool);
      }

      ngModel.$parsers.push(function(value) {
        if(!value || value.length == 0) return;

        setAsLoading(true);
        setAsAvailable(false);

        $http.get(apiUrl, { params: {attr : value }} )
          .success(function(response) {
            setAsLoading(false);
            setAsAvailable(true);
          })
          .error(function() {
            setAsLoading(false);
            setAsAvailable(false);
          });

        console.log(value)
        return value;
      })
    }
  }
});

以下是html模板的相关部分：

  <p>
    <label>Username</label>
    <input type="text" ng-model="signup.username" class='form-control' name='username'
           require minlength='3' record-availability-validator="/api/v1/validations/username"
           ng-model-options="{ debounce : { 'default' : 500, blur : 0 } }">
  </p>
  <div ng-messages="signupForm.username.$error">
    <div ng-message="required">You did not enter a username</div>
    <div ng-message="minlength">Username must be at least 4 characters</div>
    <div ng-message="recordLoading">Checking database...</div>
    <div ng-message="recordAvailable">The username is already in use...</div>
  </div>
  {{signup.username}}

调试{{signup.username}}从不显示值。如果我将其更改为{{signup}}，则其他值显示正常。此外，如果我将此指令添加到另一个输入，如email，则会出现同样的奇怪行为。我用Google搜索并尝试将scope: true添加到我的指令中，但没有任何反应。

指令中的scope使用异步验证中断视图范围

0 个答案: