如何将输入文本和ngMessage放在指令templateUrl中？有可能吗？
如何将输入文本和ngMessage放在指令templateUrl中？有可能吗？
提问于 2017-03-22 02:03:21
我想将下面的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'
};
});我在没有指示的情况下试过了，效果很好。但是当我试图把它放在指令中时，错误信息并没有显示出它们应该出现的样子。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-22 03:08:35
需要用form标记包围html内容。
<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'])
Stack Overflow用户
发布于 2017-03-22 02:46:26
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42941428
复制相关文章
相似问题
腾讯云开发者
