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>

Answer 1

您已将inputname作为inputName传递。这可以。您还需要传递表单名称。但是你正在创建隔离范围。也传递表单名称，如下所示：

<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'
  form-name='signupForm'></widget-form-input>

更新指令范围，如下所示：

 input.scope = {
            'inputType' : '=',
            'inputPlaceholder' : '=',
            'inputName' : '=',
            'inputModel' : '=',
            'inputMaxlength' : '=?',
            'inputMinlength' : '=?',
            'inputPattern' : '=?',
            'formName' : '@' //This will be treated as a string
        }

最后，更新您的指令模板，如下所示：

<div class="form-group" ng-class="{'has-success':formName.inputName.$touched && formName.inputName.$valid,'has-error':formName.inputName.$touched && formName.inputName.$invalid,'has-feedback':formName.inputName.$touched }">

您需要在指令模板中的任何位置更新硬编码的表单名称，以指向formName变量。

是否可以使用ngMessages制作可重复使用的表单组件？

1 个答案: