Question

我尝试了很多在网上找到的例子，例如： http://codepen.io/brunoscopelliti/pen/ECyka

尝试完所有这些例子后，没有一个可行。我现在正在HTML表单中进行表单验证。内置的AngularJS指令工作得很好，比如检查正确的电子邮件格式，密码长度等等。表格也提交给后端。您认为我的模块定义有什么问题吗？我目前有一个这样的模块：

var mainapp = angular.module("AngulaRails", ["ngResource"]);
mainapp.config([
  "$httpProvider", function($httpProvider) {

    $httpProvider.defaults.headers.common['X-CSRF-Token'] =        document.getElementsByName("csrf-token")[0].content;
    return $httpProvider.defaults.headers.common['Accept'] = "application/json"; }]);

mainapp.factory...
mainapp.controller

（表单提交，他们工作！）

然后

mainapp.directive

无论有什么信誉良好的来源或在线指南，我都会尝试使用指令，但它不起作用。表单的其余部分很好 - 禁用提交按钮，其他内置指令可用。

我使用的是AngularJS的测试版--1.3.0.beta-18。它有一个方便的ng-model-options = "{updateOn: 'blur'}"，只有在我离开时才能更新字段。

编辑（根据要求）： HTML表单：

  <div><p><input type="text" required id="user_name" ng-model="name" name="tname" ng-model-options="{ updateOn: 'blur' }" value="" placeholder="Username"></p>
  <span class="help-block" ng-show="SignUpForm.tname.$error.required">Required</span>
  <span class="help-block" ng-show="SignUpForm.tname.$error.text">Your name should be text</span></div>

  <div><p><input type="email" required id="user_email" ng-model="email" name="temail" ng-model-options="{ updateOn: 'blur' }" value="" placeholder="Email ID"></p>
  <span class="help-block" ng-show="SignUpForm.temail.$error.required">Required</span>
  <span class="help-block" ng-show="SignUpForm.temail.$error.email">Not the correct email format</span></div>

  <div><p><input type="password" required id="password" ng-model="password" ng-model-options="{ updateOn: 'blur' }" ng-minlength="3" ng-maxlength="9" name="password" value="" placeholder="Password"></p>
  <span class="help-block" ng-show="SignUpForm.password.$error.required">A password is required</span>
  <span class="help-block" ng-show="SignUpForm.password.$error.minlength">Your password should at least be 3 characters</span>  
  <span class="help-block" ng-show="SignUpForm.password.$error.maxlength">Your password should be no more than 9 characters</span></div>


<div><p><input type="password" required name="password_confirmation" repeat-password="password" ng-model-options="{ updateOn: 'blur' }" ng-minlength="3" ng-maxlength="9" ng-model="password_confirmation" id="password_confirmation" value="" placeholder="Re-enter password"></p>
 <span class="help-block" ng-show="SignUpForm.password_confirmation.$error.required">A  password confirmation is required</span>
  <span class="help-block" ng-show="SignUpForm.password_confirmation.$error.minlength">Your password confirmation should at least be 3 characters</span>  
  <span class="help-block" ng-show="SignUpForm.password_confirmation.$error.maxlength">Your password confirmation should be no more than 9 characters</span></div>
  <span class="help-block" ng-show="SignUpForm.password_confirmation.$error.repeat">Your password confirmation should be the same as your password</span></div>


  <p class="submit"><input type="submit" id="user_submit" name="commit" ng-disabled="SignUpForm.$invalid" value="Sign Up"></p>
</form>

                            </div>
            </div>

指令：

mainapp.directive("repeatPassword", function() {
    return {
        require: "ngModel",
        link: function(scope, elem, attrs, ctrl) {
            var otherInput = elem.inheritedData("$FormCtrl")[attrs.repeatPassword];

            ctrl.$parsers.push(function(value) {
                if(value === otherInput.$viewValue) {
                    ctrl.$setValidity("repeat", true);
                    return value;
                }
                ctrl.$setValidity("repeat", false);
            });

            otherInput.$parsers.push(function(value) {
                ctrl.$setValidity("repeat", value === ctrl.$viewValue);
                return value;
            });
        }
    };
});

最新更新：我确实在StackOverflow上找到了另一个适合我的解决方案（而不是适应这个）。不幸的是，我找不到链接了，虽然我的代码在我的文件中。我很确定所有困难都归因于最新版本的AngularJS有很多变化。

我的自定义AngularJS指令都不起作用

0 个答案: