AngularJS directive for dom-manipulating based on form validation

问题

I'm using the AngularJS validation feature, like this:

<input type="text" class="form-control" ng-required="true" name="application_name" id="application_name" ng-model="jobApplication.description" required>

If input field is empty AngluarJS assigns the ng-invalid css class to the input field. Unfortunately the theme I use needs the css-class on the parent / surrounding div:

<div class="form-group form-md-line-input " ng-class="!new_application_form.application_name.$valid && new_application_form.application_name.$touched ? 'has-error' : ''">
    <div class="input-group right-addon">
        <input type="text" class="form-control" ng-required="true" name="application_name" id="application_name" ng-model="jobApplication.description" required>
        <label for="application_name">Stellenbezeichnung: {{ jobApplication.description }}</label> 
        <span class="help-block">Help text</span>
        <span class="input-group-addon">
            <i ng-show="new_application_form.application_name.$valid" class="fa fa-warning tooltips" data-original-title="help text" aria-describedby="tooltip122640"></i>
        </span>

    </div>
</div>

As you can see I did it with a workaround (like this post suggests). It works but it really doesn't feel like "the angular way". It's redundant code and I thought about using a directive. Something like "take all divs with css class "form-md-line-input", look for an input field and apply the css class if related model / form is invalid. Is this possible?

来源：https://stackoverflow.com/questions/33494190/angularjs-directive-for-dom-manipulating-based-on-form-validation