具有动态输入的 Angularjs 显示错误指令

Question

我正在使用 Paul Yoder 的 angular-bootstrap-show-errors 指令巧妙地切换表单组上的“有错误”类。这很好用，除非我的表单组的内容包含一个使用模板呈现其输入的指令，比如预输入。相关代码在这里：

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>

这个错误总是被抛出，因为在评估代码时，输​​入元素还不存在。有没有办法在子指令完成渲染后更改此选择的时间或重新评估它？

Answer 1

最终的解决方案是使用$timeout 函数将我的link 方法包装为指令，确保在DOM 渲染后发生事件绑定。

作为对遇到此问题的人的警告，在回答此问题时，Angular 中存在一个微妙的错误，涉及远程加载的指令模板在 link 函数执行之前未呈现。有关更多信息，请参阅此问题：Why is the post link function executed before the transcluded child link functions?