javascript - Some tags not recognized in expanded directive -

i'm trying avoid repeated html, having trouble getting directive work completely. in simplified version of code, idea expand like:

<mydir ng-model="x"></mydir> 

to like:

<div ng-class="{'has-error': myform.myfield.$invalid}">     <input name="myfield" ng-model="x" ng-pattern="/^\d+$/"> </div> 

however, ng-class ignored. ng-model , ng-pattern seem working fine. directive:

.directive('mydir', function ($compile) {     return {         restrict: 'e',         priority: 100,         compile: function (element, attrs) {             var node = '<div ng-class=' +                 '"{\'has-error\': myform.myfield2.$invalid}">' +                 '<input name="myfield2" ng-model="' + attrs['ngmodel'] +                 '" ng-pattern="/^\\d+$/"></div>';             var e = angular.element(node);             $compile(e.contents());             element.replacewith(e);         }     }; } 

in running code can see how first input field correctly turns red invalid entry "ab", second input not.

change inner html of directive rather replacing entirely...

compile: function (element, attrs) {     var node = '<div ng-class=' +         '"{\'has-error\': myform.myfield2.$invalid}">' +         '<input name="myfield2" ng-model="' + attrs['ngmodel'] +         '" ng-pattern="/^\\d+$/"></div>';      element.html(node); } 

fiddle: http://jsfiddle.net/5elxw/