我在一个AngularJS应用程序中创建了一个指令,该指令会在我的应用程序中生成样式化的输入框。它看起来像这样:
AC.directive('formInput',function ($compile) {
return {
transclude: true,
replace: true,
scope:{},
templateUrl: '/views/partials/form/input.html',
restrict: 'E',
link: function(scope, element, attrs){
scope.opts = attrs;
if(attrs.ngModel){
element.find('input').attr('ng-model', attrs.ngModel);
$compile(element.contents())(scope.$parent);
}
if(!attrs.type){
scope.opts.type = 'text';
}
}
};
}
)
它的模板如下:
<label class="acxm-textfield {{opts.cssclass}}">
<span ng-bind="opts.labeltext"></span>
<input type="{{opts.type}}" name="{{opts.inputname}}" value="{{opts.inputvalue}}" placeholder="{{opts.placeholder}}" ng-maxlength="{{opts.maxLength}}"/>
</label>
呼叫很简单:
<form-input ng-model="UserProfile.FirstName" max-length="50" labeltext="{{'GENERAL.name' | translate}}" cssclass="acxm-p-horizontal" inputname="name" inputvalue="{{UserProfile.FirstName}}"></form-input>
我想为这个字段创建验证,并添加了错误信息:
<span ng-show="showError(userInfoForm.name,'email')">
You must enter a valid email
</span>
而showError是:
$scope.showError = function(ngModelController, error) {
return ngModelController.$error[error];
};
基本上,这段内容是从书籍《掌握AngularJS Web应用程序开发》中复制而来。我的问题是,当我在控制台记录名为userInfoForm
的表单时,我得到的是{{opts.inputname}}
,而不是名称属性,其值应该为“name”。我做错了什么?
name="{{opts.inputname}}"
替换为dynamic-name="opts.inputname"
。 - Khanh TO