angularjs - Unable to get $error.maxlength validation in Directive -

i creating directive adds template text type input view. in directive, trying add span class error notification if text field input more max length setting provided. have code this:

<div ng-app="app"> <form name="userform" ng-submit="processform()" novalidate>     <div use-text-box name="xyz" ng-maxlength="10" required> </div>      <button type="submit" class="btn btn-success">submit</button> </form> </div>    

my directive this:

var app = angular.module('app', []);  app.directive('usetextbox', function() {                return {                   replace:true,                   compile: function(element,attrs) {                          var name =  attrs.name;                          var maxlengtherror = attrs.hasownproperty('ngmaxlength') ? '<span ng-show="userform.' + attrs.name + '.$error.maxlength" class="help-block">text long. limit ' + attrs.ngmaxlength + ' characters.</span>' : '';                          var htmltext = '<input type="text" name="' + name + '" ng-maxlength="' + attrs.ngmaxlength + '" required />' +                                              maxlengtherror;                          element.replacewith(htmltext);                  }               }; }); 

but in above code, directive generating input text field etc.. without problem. however, not showing error message if max length more 10. doing wrong?

here link jsfiddle above example: http://jsfiddle.net/fb45j/3/

i don't know if you're learning , trying understand directives, don't need directive accomplish want.

here's fiddle without directive: http://jsfiddle.net/mikeeconroy/fb45j/7/

<div ng-app="app">     <ng-form name="userform" novalidate role="form" ng-controller="myformctrl">         <div>             <p class="text-muted">enter in text remove it.  need make such angular sees form "dirty" , tries validate form.</p><br>         </div>         <div>             <input type="text" name="xyz" ng-model="xyz" maxlength="10" required>             <span ng-show="userform.xyz.$dirty && userform.xyz.$error.required && userform.xyz.$invalid" style="color: #900;">this field required!</span>         </div>          <br />   <br />           <button type="button" ng-click="processform()" class="btn btn-success">submit</button>     </ng-form> </div> 

here's angular. not doing showing how '$dirty' on form element works.

var app = angular.module('app', []); app.controller('myformctrl',function($scope,$element){     $scope.form = $element.controller('form');     $scope.processform = function(){         // set form dirty         $scope.form.xyz.$dirty = true;         console.log('processing!');     }; }); 

edit: here's fix using directive approach

http://jsfiddle.net/mikeeconroy/fb45j/8/

app.directive('usetextbox', function($compile,$timeout) {            return {               replace:true,               scope: false,               link: function(scope,element,attrs) {                      var name =  attrs.name;                      var maxlengtherror = attrs.hasownproperty('ngmaxlength') ? '<span ng-show="userform.' + attrs.name + '.$error.maxlength" class="help-block">the limit ' + attrs.ngmaxlength + ' characters.</span>' : '';                    var htmltext = '<div><input type="text" id="' + name + '" name="' + name + '" ng-maxlength="' + attrs.ngmaxlength + '" ng-model="test_' + attrs.name + '" required>' +   maxlengtherror + '</div>';                    $compile(htmltext)(scope,function(_element,_scope){                     element.replacewith(_element);                   });              } // end link           }; }); 

you need inject $compile directive , use compile html , insert correct scope. _element compiled new element.

$compile(htmltext)(scope,function(_element,_scope){     element.replacewith(_element); }); 

edit: here's example using compile property of directive

http://jsfiddle.net/mikeeconroy/dzp9l/1/

i guess seems difference between example , 1 introduction of form's controller.