如何將輸入文本和ngMessage放入指令templateUrl中？可能嗎？

Question

我想把下面的html代碼放在Angularjs指令的templateUrl的內部，但我不知道該怎麼做。

我的HTML被放到裏面templateUrl

<div class="form-group" ng-class="{ 'has-error': userForm.username.$touched && userForm.username.$invalid }"> 
    <label>Name</label> 
    <input type="text" name="username" class="form-control" 
    ng-model="userForm.username" 
    ng-minlength="5" 
    ng-maxlength="10" 
    required> 

    <div class="help-block" ng-messages="userForm.username.$error" ng-if="userForm.username.$touched"> 
    <p ng-message="minlength">Your name is too short.</p> 
    <p ng-message="maxlength">Your name is too long.</p> 
    <p ng-message="required">Your name is required.</p> 
    </div> 
</div> 

我最初的指令

app.directive('nameDirective', function() { 
    return { 
    restrict: 'AE', 
    templateUrl: '/input-form/name.html' 
    }; 
}); 

我試了一下沒有指令，並能正常工作。但是當我試圖將它放入指令時，錯誤信息不會像應該出現的那樣出現。

Answer 1

需要圍繞HTML內容與form標籤。

<form name="userForm"> 
     <div class="form-group" ng-class="{ 'has-error': userForm.username.$touched && userForm.username.$invalid }"> 

    <label>Name</label> 
    <input type="text" name="username" class="form-control" 
     ng-model="username" 
     ng-minlength="5" 
     ng-maxlength="10" 
     required> 

    <div class="help-block" ng-messages="userForm.username.$error" ng-if="userForm.username.$touched"> 
    <p ng-message="minlength">Your name is too short.</p> 
    <p ng-message="maxlength">Your name is too long.</p> 
    <p ng-message="required">Your name is required.</p> 
    </div> 
    </div> 
</form> 

注入ngMessages如果您尚未

angular.module("app",['ngMessages'])

Demo

Answer 2

app.directive('nameDirective', function() { 
return { 
    restrict: 'AE', 
    templateUrl: '/input-form/name.html', 
    transclude: true, 

}; 
}); 

你需要使用ng-transclude，在你的指令選項添加transclude: true，並添加ng-transclude到您的模板：

<div ng-transclude class="form-group" ng-class="{ 'has-error': userForm.username.$touched && userForm.username.$invalid }"> 
<label>Name</label> 
<input type="text" name="username" class="form-control" 
    ng-model="userForm.username" 
    ng-minlength="5" 
    ng-maxlength="10" 
    required> 

    <div class="help-block" ng-messages="userForm.username.$error" ng-if="userForm.username.$touched"> 
    <p ng-message="minlength">Your name is too short.</p> 
    <p ng-message="maxlength">Your name is too long.</p> 
    <p ng-message="required">Your name is required.</p> 
</div> 
</div>