将必需添加到 Angular 指令答案

【问题标题】：Add Required to Angular Directive将必需添加到 Angular 指令
【发布时间】：2015-07-29 06:11:46
【问题描述】：

我有以下 Angular 指令：

app.directive('basicInput', function () {
    return {
        restrict: 'AE',
        templateUrl: 'DirectiveTemplates/BasicInput.html',
        replace: true,
        scope: {
            ngModel: '=',
            visual: '@',
            placeholder: '@',
            pattern: '=',
            ngChange: '='            
        }
    };
});

使用以下模板：

<ng-form name="basicInput">
    <div class="form-group">
        <label for="input">{{visual}}</label>
        <input type="text" class="form-control" name="input" ng-model="ngModel" placeholder="{{placeholder}}" required ng-pattern="pattern">
        <div ng-messages="basicInput.input.$error" class="help-block">
            <span ng-message="required"> Required</span>
            <span ng-message="pattern"> Invalid Characters or is too short</span>
        </div>
    </div>
</ng-form>

我在 html 中称为（例如）：

<basic-input ng-model="formData.official_name" data-visual="Official Name" data-placeholder="Name" pattern="regex.short"></basic-input>

我的问题是，如何使模板中输入标签上的“必需”成为可选？

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

试试这个：

指令：

scope: {
        ngModel: '=',
        visual: '@',
        placeholder: '@',
        pattern: '=',
        ngChange: '=',
        isRequired: '='
    }

模板：

<input type="text" class="form-control" ng-required="isRequired" name="input" ng-model="ngModel" placeholder="{{placeholder}}" ng-pattern="pattern">

用法：

<basic-input ng-model="formData.official_name" is-required="false" data-visual="Official Name" data-placeholder="Name" pattern="regex.short"></basic-input>

【讨论】：

我必须将 isRequired 更改为 @ 而不是 = 才能使其正常工作，这样它就不会在 $scope 中查找变量。

【解决方案2】：

ng必填您可以根据属性将 ng-required 属性设置为 true 或 false

文档：https://docs.angularjs.org/api/ng/directive/input

【讨论】：

我试过设置 ng-required="true" 没有成功。
您是否尝试将变量传递给它？而不是字面的 false 或 true ？
是的，我尝试将变量传递给它，问题是，它在 ng-form 标签上设置了 ng-required，而不是在我想要的输入标签上。
你能告诉我你的代码吗？？？注意：我的意思是在你的模板中使用 ng-required 的输入，而不是在你的指令中！