在AngularJS中，在指令DOM之后插入DOM的定制指令的最佳编写方式是什么？

Question

我想写一个'vt-require‘指令覆盖'required’指令，这样我就可以编写代码：

<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，我可以写它。但我不知道什么是安全的方式来写它？编写代码add的选项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(在link函数中这样做)。

另外，我将为表单添加一个require，这样您就可以动态地获取表单名称，而不是依赖于在name属性中设置的表单名称。

例如。

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>'
  };
};