Question

在我的应用程序中，我有一个自定义指令，由其他人编写）验证并格式化几个不同的表单字段（例如姓名，地址，电话，信用卡号，DOB等）。如果用户输入了无效数据，则ng-invalid被添加到该特定表单元素的CLASS属性中。有一个函数绑定到表单的提交，在允许提交之前检查所有字段是否包含有效数据。像

这样的东西

  app.directive('validateForms', function () {

      var form = angular.element(elem);
      scope.isSubmitted = false;

      form.bind('submit', function() {
          scope.isSubmitted = true;
          if(form.hasClass('ng-invalid')) return false;
       });
  });

此指令适用于视图中的元素。

<form name="request-info" id="request-info" validate-forms>

我的任务是在包含无效数据的字段下面显示错误消息。我的想法是我应该创建一个应用错误消息的第二个指令，以便可以在应用程序中的各种表单上使用不同的验证指令和不同的错误显示指令。

所以在第二个指令中，我试图看$告诉我表单已经提交并在必要时显示错误消息。我试图设置一个变量isSubmitted，它将在提交时更改为TRUE，但第二个指令似乎没有看到该变量何时发生变化。

app.directive('showErrMsgs', ['$timeout',
        function($timeout) {
            return {
                restrict : 'A',
                link : function(scope, element, attrs) {
                    scope.$watch('isSubmitted', function () {
                        $timeout(function () {
                            alert(scope.isSubmitted);
                            // call function to display error messages
                        });
                    });
            }
        };
}]);

此指令适用于视图中的元素。

<form name="request-info" id="request-info" validate-forms show-err-msgs>

预期的行为是单击提交按钮将更改isSubmitted的值并触发alert（）及其值（暂时）。可悲的是，根本没有任何警报......这让我相信以下一个或两个：

2个指令属于不同的范围，这就是为什么其中一个指令没有被检测到的原因
我认为这完全错了，不可能这样做。

有人能告诉我哪里出错了？

Answer 1

Uuuuugh，如此愚蠢!!我将第一个指令作为我的“验证”模块的一部分：

angular.module('validator').directive(...

和第二个指令作为我主模块的一部分。

angular.module('buyApp').directive(...

当两个指令都附加到“验证”模块时，我原始帖子中的代码可以正常工作。我仍然想知道这是否是一种谨慎的表单验证和显示错误消息的方法。任何人吗？

可以/应该将多个自定义指令应用于Angular中的同一元素吗？

1 个答案: