Angularjs使用动态输入显示错误指令

我正在使用Paul Yoder的指令在表单组上巧妙地切换“has error”类。这非常有效，除非我的表单组的内容包含一个使用模板呈现其输入的指令，比如typeahead。相关代码如下：

angular.module('ui.bootstrap.showErrors', [])
    .directive 'showErrors', ['$timeout', ($timeout) ->
        linkFn = (scope, el, attrs, formCtrl) ->
        blurred = false
        inputEl = el[0].querySelector("[name]")
        inputNgEl = angular.element(inputEl)
        inputName = inputNgEl.attr('name')
        unless inputName
           throw "show-errors element has no child input elements with a 'name' attribute"

       inputNgEl.bind 'blur', ->
           blurred = true
           el.toggleClass 'has-error', formCtrl[inputName].$invalid
       scope.$watch ->
           formCtrl[inputName].$invalid
           , (invalid) ->
              return if !blurred && invalid
              el.toggleClass 'has-error', invalid

       scope.$on 'show-errors-check-validity', ->
           el.toggleClass 'has-error', formCtrl[inputName].$invalid
       scope.$on 'show-errors-reset', ->
           $timeout ->
               # want to run this after the current digest cycle
               el.removeClass 'has-error'
               blurred = false
               , 0, false
    {
        restrict: 'A'
        require: '^form'
        compile: (elem, attrs) ->
        unless elem.hasClass 'form-group'
            throw "show-errors element does not have the 'form-group' class"
        linkFn
    }
]

我的示例表单如下所示：

<div class="form-group" show-errors>
    <cool-control />
</div>

---

此错误总是被抛出，因为在计算代码时，输入元素还不存在。是否有一种方法可以在完成子指令的渲染后更改此选择的计时或重新评估它？

最终解决方案是使用

$timeout

函数为该指令包装我的

link

方法，确保事件绑定在DOM渲染后发生

---

作为对遇到此问题的人的警告，在回答此问题时，Angular中存在一个微妙的错误，即在执行

链接

函数之前未呈现远程加载的指令模板。有关更多信息，请参见此问题：

您能否共享已包含$timeout包装的代码？有一个更优雅的解决方案，有望很快被合并到master中。严格来说，这不是你的答案，但谷歌引领我来到这里。我试图在页面上多次放置的指令中使用

显示错误
。诀窍是使用
ng form
指令-请参阅