AngularJS：页面加载时不存在的DOM元素上的指令无法编译答案

【问题标题】：AngularJS : directive on a DOM element not present on page load doesn't compileAngularJS：页面加载时不存在的DOM元素上的指令无法编译
【发布时间】：2014-06-12 19:54:00
【问题描述】：

我从 SO 的一个示例中创建了一个新指令 ngModelOnblur，它使 ng-model 仅侦听输入元素上的模糊事件。当元素出现在页面加载时，该指令可以正常工作。我想在不同页面上的一个输入元素上使用相同的指令，其中该元素在页面加载时不存在，但在 AJAX 调用完成时添加。

模板如下所示：

<table>
  <tr ng-repeat="person in persons">
    <td><input type="text" ng-model="person.city" ng-model-onblur ng-change="validateCity(person.city)" /></td>
  </tr>
</table>

指令如下所示：

angular.directive('ngModelOnblur', function(){
  return {
    restrict: 'A',
    require: 'ngModel',
    priority: 1, //this is required for the directive to run after ng-model is compiled.
    link: function(scope, elm, attr, ngModelCtrl) {
            if (attr.type === 'radio' || attr.type === 'checkbox') return;

            elm.unbind('input').unbind('keydown').unbind('change');
            elm.bind('blur', function() {
                scope.$apply(function() {
                    ngModelCtrl.$setViewValue(elm.val());
                });
            });
    }
  };
});

我尝试在链接函数中使用 $timeout 和 scope.$evalAsync 但似乎没有任何东西触发指令编译。

任何帮助将不胜感激！

【问题讨论】：

你是如何注入新的 html 的？您可能必须编译它
persons 最初为 null，但在 AJAX 调用完成后添加。
那条评论毫无意义。如何明智地添加代码？
我的意思是该元素在页面加载时被隐藏，因为 people 数组是空的。
在 plunker 中创建一个演示，您的 cmets 中缺乏细节没有帮助

标签： javascript angularjs angularjs-directive angularjs-ng-repeat

【解决方案1】：

您是否使用ng-view 加载模板？是否调用了链接函数？

如果您通过其他方式加载模板，您可能需要手动$compile html。

var html = $(someDomNode).html();
$compile(html)(scope);

【讨论】：

我没有使用 ng-view。 people 最初为 null，但在 AJAX 调用完成后添加。根本没有调用链接函数。

【解决方案2】：

没关系。我想我可能犯了一个愚蠢的错误。我在一个单独的模块中添加了我的新指令，但没有在我的原始模块中添加依赖项。我会试试看它是否有效。很抱歉造成混乱，感谢@charlietfl 和@agreco。我再问一下是不是加了依赖后就不行了。

编辑

原来这就是问题所在。当元素在 AJAX 调用完成后、初始加载期间和所有不同情况下可见时，该指令正在工作。感谢您的所有帮助，并对造成的混乱感到抱歉。如果 angular 可以对问题提供更多解释，那将很有帮助。

【讨论】：