angularjs ngMessages inside directive

问题

I have created a directive with Username and ngMessage for validation. But ngMessage does not get displayed when validation occurs.

created a plunker. can anybody help me

<!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

回答1:

You did wrong in your embedded html. I changed your source code to:

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>',

And it worked here: http://plnkr.co/edit/onlfdhraHipjezcgIg7f?p=preview

来源：https://stackoverflow.com/questions/33429542/angularjs-ngmessages-inside-directive

标签

angularjs

directive