1

我是 Angular 的新手，可能试图做错事。

我想要做的是创建一个验证消息指令，它可以显示表单中特定输入字段的验证消息。如果输入字段缺少值，它应该只显示必填字段的验证消息。

我尝试过使用以下 HTML：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>    
    <form name="myForm">
  <input name="myInput" type="text" x-ng-model="object.input" required/><br/> 
  <span ng-show="myForm.myInput.$error.required" >Value required (working)</span><br/>
     <span x-msg-required="myForm.myInput"></span>
    </form>
  </body>
</html>

和JS：

var app = angular.module('myApp', []);
app.directive('msgRequired', function() {
  return {
    link : function(scope, element, attrs) {
      element.text('Value required');
      attrs.$set('ngShow', attrs.msgRequired + '.$error.required' );
    }
  };

});

第一个带有 out 指令的 span 元素按预期显示验证消息。我的指令的 span 元素似乎总是显示验证消息。我肯定不理解角度的指令。我错过了什么或者有更好的方法来简化角度验证消息？

有一个plunker：http ://plnkr.co/edit/Gjvol8inw1DlWjHomZQw

4

2 回答 2

4

我也被 Angular 所困扰，并在 AngularAgility 中创建了一个名为 Form Extension 的指令套件来解决这个问题。它会根据您元素上的内容自动为您生成验证消息。它也是非常可配置的，如果您愿意，甚至可以为您生成标签。

考虑通常必须键入这样的内容才能获得验证：

<div ng-form="exampleForm">
    <label for="firstName">First Name *</label>
    <div>
        <input type="text" id="firstName" name="firstName" ng-model="person.firstName"
               ng-minlength="2" />
        <div ng-show="exampleForm.firstName.$dirty && exampleForm.firstName.$error.minlength">
            First Name must be at least 2 characters long.
        </div>
    </div>
</div>

那是一种痛苦。使用该插件，您可以改为执行以下操作：

<div ng-form="exampleForm">
    <div>
        <input type="text" aa-auto-field="person.firstName" ng-minlength="2" />
    </div>
</div>

以下是一些相关链接：

广泛的演示

博客文章解释它

来源在 GitHub

于 2014-01-31T05:15:57.237 回答
0

所以我看到这是几个月前的事了，但如果有人正在寻找有用的东西：

我将您的 Javascript 更新为：

var app = angular.module('myApp', []);

app.directive('msgRequired', function($compile) {
    return {
      //transclude: true,
      restrict: "A",
        link: function(scope, element, attrs) {
            element[0].innerHTML = 'Value required in angular directive';
            attrs.$set('ngShow', attrs.msgRequired + ".$error.required");

            $compile(element)(scope)
        }
    };
  });

这似乎有效。然而，我在另一个项目中做了一些非常相似的事情，并得到了一个无限的编译循环:(调查那个......

plnkr 住在这里。

于 2013-11-18T19:45:58.630 回答