2

这是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>

4

1 回答 1

0

您已经将 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 变量。

于 2016-01-21T08:25:12.663 回答