AngularJS Example - ngMessages

for http://stepansuvorov.com/blog/

HTML

<form name="demoForm">
  <div validate> 
    <input name="amount" type="text" ng-model="amount" message="test message">
  </div>
</form>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>

JavaScript

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

app.controller('mainCtrl', function ($scope) { 
    $scope.amount = 3;
});

app.directive('validate', function($compile) {
	return{
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000, 
      scope: {
      	message: '='
      },

      link: function link(scope,element, attrs) {
        var inputElement = element.find("input");
        inputElement.attr('required', 'required');
        
        element.append($compile('<div ng-messages="demoForm.amount.$error"><p class="valdr-message" ng-message="required">Field is required</p> </div>')(scope));

        element.removeAttr("validate");
        element.removeAttr("data-validate");

        $compile(element)(scope);
      }   
	}

})