包装器输入元素不与验证一起使用

Question

我想创建一个自定义指令，用div包装输入元素，并在模型无效时向该div添加'has-error'....我该怎么做？

按照我正在尝试做的事情并且不起作用：

app.directive('nsInput', function ($compile) {
return {
    replace: true,
    restrict: 'E',
    require: ['^form', '^ngModel'],
    scope: {
        type: '@'
    },
    template: '<input type="{{type}}" class="form-control"/>',
    link: function (scope, element, attrs, ctrls) {
        var inputName = ctrls[0].$name + '.' + attrs.name + '.$invalid';
        var html = '<div class="control-group col-md-5" ng-class="{\'has-error\': ' + inputName + '}"></div>';
        element.wrap($compile(html)(scope));
    }
}})


     <form name="frmTeste">
        <ns-input ng-model="model.nome" type="text" size="5" title="Nome" name="nome" required/>
    </form>