Question

我已经使用Username和ngMessage创建了一个用于验证的指令。但验证发生时，ngMessage不会显示。

创造了一个plunker。任何人都可以帮助我

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

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>

  <style>
    input.ng-invalid {
      border: 1px solid red;
    }
  </style>
  <script>
    var module = angular.module('app', ['ngRoute', 'ngMessages']);
  </script>
  <script src="config.js"></script>
  <script src="regdirective.js"></script>
</head>

<body>
  <ng-view></ng-view>
</body>

</html>

http://plnkr.co/edit/JrKzLuh739gcqGFP71jn?p=preview

Answer 1

你在嵌入式HTML中做错了。我将您的源代码更改为：

template:'<div>User Name<input type="text" ng-model="reg.Username" name="Username" class="form-control" required ng-minlength="5" ng-maxlength="20" /></b></div>' +
    '<br><div ng-messages="regForm.Username.$error" style="color:maroon" role="alert">' +
    '<div ng-message="required">Enter User Name</div>' +
    '<div ng-message="minlength">User name is too short</div>' +
    '<div ng-message="maxlength">User Name is too long</div></div>',

它在这里工作：http://plnkr.co/edit/onlfdhraHipjezcgIg7f?p=preview

angularjs ngMessages inside指令

1 个答案: