Angularjs Angular$compile会导致Datepicker弹出框稍微出现错误

更新1：添加更多详细信息。
更新2：添加了plunker代码以重现问题。请参阅下面的链接。
更新3：我在github上收到angular团队的回复。检查一下。
更新4：根据AngularJS团队的要求在github上发布更新。此外，我之前添加的建议解决方案结果表明，它正在创建一个新的视觉问题。请参阅下面的详细信息。
更新5：从Angular团队获得另一个反馈。我认为我们已经接近找到解决方案的80%

我在我的项目中实现了Angular UI datepicker，过了一段时间，我注意到当我打开弹出框，单击要更改为另一个月的月份时，另一个弹出窗口显示在现有弹出窗口的顶部。请参阅下面的快照以获取更多详细信息：

最初，当我点击月份时，当前弹出窗口应该消失，另一个弹出窗口应该显示以选择新月份

然而，当我在这个月点击两次（下面以黄色突出显示）时，弹出窗口将消失，并且工作正常。但是，在我选择了一个日期之后，问题会再次出现

我使用的是AngularUI datepicker官方演示网站上的相同示例代码。在下面找到相关网站和plunker代码：

我的代码与上面plunker示例中的代码完全相同。唯一的区别是，我使用

$compile

服务动态添加所需的字段验证

经过广泛的故障排除，发现

$compile（）

服务导致了这种行为。我做了一些研究，发现

$compile

服务也会导致下拉列表或

select

元素中出现重复项。我使用了提议的变通方法，它奏效了。见下面的代码：

$compile(child)(elmScope, function (clone) {
    angular.element(child).after(clone);     
    angular.element(child).remove();
});

app.directive('checkIfRequired', ['$compile', '$timeout', function ($compile, $timeout) {
  return {
    priority: 2000,
    terminal: true,
    /*link: function (scope, el, attrs) {
      el.removeAttr('check-if-required');
      var children = $(':input', el);
      children.each(function(key, child) {
        if (child && child.id === 'test_me') {
            angular.element(child).attr('ng-required', 'true');
                }
      });
      $compile(children)(scope);
    },*/
    compile: function (el, attrs) {
        el.removeAttr('check-if-required');
        var children = $(':input', el);
        children.each(function(key, child) {
            if (child && child.id === 'test_me') {
                angular.element(child).attr('ng-required', 'true');
                    }
            });
        var compiled = $compile(children, null, 2000);
        return function( scope ) {
            compiled( scope );
        };
    }
  };
}]);

我使用

$compile

的原因是使用这种方法将DB中的动态验证规则添加到元素中

在我得到之后，我发现他们：

当我尝试应用建议的修复时，我得到了大量错误。似乎在使用

terminal=true

时，“ng init”下的内部元素中的所有代码都没有执行。我注意到许多范围变量变得“未定义”

这是试图找到解决方案的第一步。见下面的代码：

$compile(child)(elmScope, function (clone) {
    angular.element(child).after(clone);     
    angular.element(child).remove();
});

app.directive('checkIfRequired', ['$compile', '$timeout', function ($compile, $timeout) {
  return {
    priority: 2000,
    terminal: true,
    /*link: function (scope, el, attrs) {
      el.removeAttr('check-if-required');
      var children = $(':input', el);
      children.each(function(key, child) {
        if (child && child.id === 'test_me') {
            angular.element(child).attr('ng-required', 'true');
                }
      });
      $compile(children)(scope);
    },*/
    compile: function (el, attrs) {
        el.removeAttr('check-if-required');
        var children = $(':input', el);
        children.each(function(key, child) {
            if (child && child.id === 'test_me') {
                angular.element(child).attr('ng-required', 'true');
                    }
            });
        var compiled = $compile(children, null, 2000);
        return function( scope ) {
            compiled( scope );
        };
    }
  };
}]);

感谢您在我的项目中以正确的方式应用修复程序

---

我以前发布过一个解决方案，但后来我删除了它。我后来注意到它产生了一种有趣的叠加效应，比我之前报道的更糟糕

以下是github上的更新，详细信息如下：

当我收到AngularJS团队的回复时，我会不断更新

请容忍我，直到我找到一个永久的解决办法

---

旧的建议解决方案： 为了避免此问题，不得使用

$compile

服务，或者如果必须使用此代码示例来修复此问题：

$compile(child)(elmScope, function (clone) {
    angular.element(child).after(clone);     
    angular.element(child).remove();
});

---

希望这对其他面临同样问题的人有价值。

这是为了进行纠正。以前添加的解决方案没有按预期工作

有关完整详细信息，请查看github上的更新：

现在，我可以提出一种不同的方法来使用动态验证规则，这些规则存储在DB上，并用AngularJS表单加载

请参考此处的代码部分，作为此拟议解决方案的基础：

不要使用

$compile

，而是在指令

中检查是否需要

，为字段

子.id

创建一个新的

范围

变量，如下所示：

if (scope.isFieldRequired(child.id)) {
    //angular.element(child).attr('ng-required', "true");
    //$compile(child)(elmScope);
    scope.RootController.ngRequired[child.id] = true;
} else {
    scope.RootController.ngRequired[child.id] = false;
}

定义元素时，请确保其类似于以下内容：

<input id="customer_id" name="customer_id" ng-model="customer_id" ng-required="RootController.ngRequired.customer_id"/>

如果Angular团队对使用

$compile

发现的问题没有给出满意的答复，我将切换到上述方法。我几乎可以肯定上述方法会奏效

如果您有任何反馈，请这样做

---

Tarek

这是我从github的AngularJS团队获得的另一个解决方案

请参考此处的代码部分，作为此拟议解决方案的基础：

基本上，在指令链接函数中使用

$compile

时，可以使用以下代码示例来避免双重编译问题：

app.directive('checkIfRequired', ['$compile', '$timeout', function ($compile, $timeout) {
    return {
        priority: 2000,
        terminal: true,
        link: function (scope, el, attrs) {
            el.removeAttr('check-if-required');
            $(':input', el).each(function(key, child) {
                if (child && child.id === 'test_me') {
                    angular.element(child).attr('ng-required', 'true');
                }
            });
            $compile(el, null, 2000)(scope);
        }
    };
}]);

---

这是要求您有一个循环，它将遍历与指令相关的父元素的子元素

检查是否需要
用您的代码更新帖子。当然，很快就会这样做。@Aravind:我已经用更多的细节和示例代码更新了这个问题。感谢您的反馈。@Aravind:我已经用大量代码示例和许多更新更新了我的帖子。。。我希望我能很快得到帮助。