angularjs - 向现有元素添加指令

Question

我正在尝试在将来的某个时候将所需的指令添加到元素中。在示例中，如果模型字段是脏的，则将元素设为必需。我试图设置所需的属性（有点乐观）我现在正在编译和链接元素并尝试用新元素替换旧元素。

我的元素只是从页面上消失了？我会以正确的方式解决这个问题吗？

 app.directive('requiredIfDirty', function ($compile, $timeout) {
                        return {
                            restrict: "A",
                            require: // element must have ng-model attribute.
                            'ngModel',
                            link: // scope = the parent scope
                            // elem = the element the directive is on
                            // attr = a dictionary of attributes on the element
                            // ctrl = the controller for ngModel.
                            function (scope, elem, attr, ctrl) {
                                var unsubscribe = scope.$watch(attr.ngModel, function (oldValue, newValue) {
                                    if(angular.isUndefined(oldValue)) {
                                        return;
                                    }
                                    attr.$set("required", true);
                                    $timeout(function () {
                                        var newElement = $compile(elem)(scope);
                                        elem.replaceWith(newElement);
                                    }, 1);
                                    unsubscribe();
                                });
                            }
                        };
                    });

Answer 1

你必须Transclusion在你的指令中使用。这将允许您拉出您的内容，附加required到它，然后编译它。这是一个很好的教程，解释了基本概念：Egghead.io - AngularJS - Transclusion Basics

Answer 2

你实际上不需要这样做。Angular 实际上有一个指令ng-required

看

http://docs.angularjs.org/api/ng.directive:input.text

您可以在任何具有 ng-model 的字段上向 ng-required 提供表达式，它会根据表达式评估为 true 将所需的验证器添加到其中。

从文档

ngRequired(optional) – {string=}– 当 ngRequired 表达式的计算结果为 true 时，向元素添加必需的属性和必需的验证约束。当您想将数据绑定到所需属性时，请使用 ngRequired 而不是 required。