AngularJS ng-Messages-Include Directive

The AngularJS ng-messages-include directive is used to include or import the existing ngMessagesInclude template from specific location and place the downloaded template into the page that the ngMessagesInclude directive is placed within the ngMessagesInclude container.

In order to use ng-messages-include directive, you need to include below supported files in your HTML page: <script src="angular.js"> <script src="angular-messages.js">

Syntax

<div ng-messages="myForm.myField.$error" role="alert">
	<div ng-messages-include="error-messages"></div>
</div>

AngularJS ng-Messages-Include Directive Example

<!DOCTYPE html>
<html ng-app="ngMessagesInclude">
<head> <!-- www.techstrikers.com -->    
<title>AngularJS ngMessage Sample</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://www.techstrikers.com/AngularJS/Includes/angular.min.js"></script>
  <script src="https://www.techstrikers.com/AngularJS/Includes/angular-messages.js"></script>
  <script>
    var app = angular.module('ngMessagesInclude', ['ngMessages']);
    app.controller('ngMessagesInclude', function($scope) {
      $scope.name = 'World';
    });
  </script>
</head>
 
   <fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS ngMessagesInclude Example</legend>   
  <body ng-controller="ngMessagesInclude">
  <form name="myForm">
    <div style="font-family:Arial;margin:10px;width:350px;">
  <label>Enter first name:</label>
  <input type="text" name="firstName" ng-model="name1" required minlength="5" maxlength="20"/><br>
      <label>Enter last name:</label>
     <input type="text" name="lastName" ng-model="name2" required minlength="5" maxlength="20"/><br/><br/>
    </div>
    <div ng-messages="myForm.firstName.$error">
        <div ng-messages-include="errorMessages.html"></div>
      </div>
</form>
</fieldset> 
</body>      
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Messages-Include Directive

AngularJS ng-Messages-Include Directive Example

Recent Articles