Question

我想写一个＆＃39; vt-require＆＃39;指令覆盖＆＃39;必需＆＃39;指令所以我可以写一个代码：

<input type="text" name="form.fullname" data-ng-model="fullname" data-vt-required/>

html将是：

<input type="text" data-vt-required="" data-ng-model="fullname" name="fullname">
<div class="error-list">
    <span data-ng-show="form.fullname.$error.required">The field cannot empty</span>
</div>

按照说明https://docs.angularjs.org/api/ng/service/ $ compile，我可以写。但我不知道什么是安全的写作方式？选项1,2,3或4编写代码添加

<div class="error-list">
<span data-ng-show="form.fullname.$error.required">The field cannot empty</span>
</div>

-

var vtRequiredDirective = [function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        compile: function (elm, attr) { 
            //[Option 1]
            return {
                pre: function (scope, elm, attr, ctrl) {
                    //[Option 2]
                },
                post: function (scope, elm, attr, ctrl) {
                    //[Option 3]
                }
            }
        },
        link : function (scope, elm, attr, ctrl) {
                    //[Option 4]
                }
    };
}];

我希望这是可以理解的。

感谢。

Answer 1

我个人会选择选项4（在链接功能中执行此操作）。

此外，我还会为表单添加一个require，因此您可以动态地反对依赖于name属性中设置的表单名称的表单名称。

E.g。

require: '^form',
link: function ($scope, $element, $attrs, $formCtrl) {

    // $name will be the form name
    var fullyQualifiedName = $formCtrl.$name + "['" + $attrs.ngModel + "']";

    // create the expression to be used by the ng-show for the error span
    var isRequiredExpression = fullyQualifiedName + ".$error.required && (" + $formCtrl.$name + ".$submitted || !" + fullyQualifiedName + ".$pristine)";

    // etc
    ....
}

Answer 2

那将是选项4。

编译函数处理转换模板DOM。以来大多数指令不进行模板转换，不使用它常。

也许你也可以用模板替换整个指令：

<input-requierd name="fullname" />

指令：

var inputRequiredDirective = function () {
  return {
    restrict: 'E',
    replace = true,
    scope: {
      name = '@'
    }
    template: '<input type="text" data-ng-model="{{name}}" name="{{name}}"><div class="error-list"><span data-ng-show="form.{{name}}.$error.required">The field cannot empty</span></div>'
  };
};

哪个是编写自定义指令以在AngularJS中的指令DOM之后插入DOM的最佳方法？

2 个答案: