angularjs - ngMessages で再利用可能なフォーム コンポーネントを作成することは可能ですか?

Question

ここに、ディレクティブを作成したいhtmlコードがあります

<div class="form-group" ng-class="{'has-success':signupForm.username.$touched && signupForm.username.$valid,'has-error':signupForm.username.$touched && signupForm.username.$invalid,'has-feedback':signupForm.username.$touched }">
    <input tabindex="1" type="text" class="form-control" placeholder="username" ng-model="authCtrl.user.username" required ng-minlength='5' ng-maxlength='10' name="username" ng-pattern="/^[a-z0-9]*$/">
    <span class="glyphicon" ng-show="signupForm.username.$touched" ng-class="{'glyphicon-ok form-control-feedback':signupForm.username.$touched && signupForm.username.$valid,'glyphicon-remove':signupForm.username.$touched && signupForm.username.$invalid,'form-control-feedback':signupForm.username.$touched}"></span>
    <div ng-messages="signupForm.username.$error" ng-show="signupForm.username.$touched">
        <div ng-messages-include="/static/app/components/widget/widget.view.input-error.html"></div>
    </div>
</div>

しかし、コンポーネント、つまり formname.inputname.$error に変数を渡す方法がわかりませんでした

更新：これまでの進捗状況：

テンプレート ：

    <widget-form-input
  input-type='authCtrl.input.username.type'
  input-placeholder='authCtrl.input.username.placeholder'
  input-name='authCtrl.input.username.name'
  input-model='authCtrl.user.username'></widget-form-input>

ディレクティブ:

    function widgetFormInput(){
        var input = {};
        input.restrict = 'E';
        input.scope = {
            'inputType' : '=',
            'inputPlaceholder' : '=',
            'inputName' : '=',
            'inputModel' : '=',
            'inputMaxlength' : '=?',
            'inputMinlength' : '=?',
            'inputPattern' : '=?',
        }
        input.templateUrl = '/static/app/components/widget/widget.view.form-input.html';
        return input;
    }

ディレクティブ テンプレート :

<div class="form-group" ng-class="{'has-success':signupForm.inputName.$touched && signupForm.inputName.$valid,'has-error':signupForm.inputName.$touched && signupForm.inputName.$invalid,'has-feedback':signupForm.inputName.$touched }">
<input tabindex="1" type="text" class="form-control" placeholder="{{inputPlaceholder}}" ng-model="inputModel" required ng-minlength='inputMinlength' ng-maxlength='inputMaxlength' name="{{inputName}}" ng-pattern="inputPattern">
<span class="glyphicon" ng-show="signupForm.inputName.$touched" ng-class="{'glyphicon-ok form-control-feedback':signupForm.inputName.$touched && signupForm.inputName.$valid,'glyphicon-remove':signupForm.inputName.$touched && signupForm.inputName.$invalid,'form-control-feedback':signupForm.inputName.$touched}"></span>
<div ng-messages="signupForm.inputName.$error" ng-show="signupForm.inputName.$touched">
    <div ng-messages-include="/static/app/components/widget/widget.view.input-error.html"></div>
</div>