Question

我的模板使用两个自定义指令

<div my-parent-directive>
   <div my-child-directive>
       <input name="foo" />
   </div>
</div>

Parent Directive将一个类添加到name = foo的input元素的父元素。父元素由child指令添加。

angular.module('myApp', [])

.directive('myParentDirective', function() {
    return {
       restrict: 'A',
       transclude: true,
       link: function(scope, element, attrs) {
           angular.element("input[name=foo]").closest(".control-group").addClass("warning");
       },
       template: '<div ng-transclude></div>'
    }
})

.directive('myChildDirective', function() {
    return {
       restrict: 'A',
       transclude: true,
       template: '<div class="control-group"><div ng-transclude></div><span class="help-inline"></span></div>'
    }
});

但是，我认为当父指令查找元素时，子指令尚未解析或完成其工作。我也提供以下小提琴：

http://jsfiddle.net/bsy8o1p4/

如何确保子指令在父级之前先解析？

Answer 1

您需要等待一个摘要周期才能执行此操作。您应该让一个摘要周期完成，以便子指令可以呈现。另请注意，您不能使用jqlite选择器（@ angular.element()）按标记名选择元素。使用$timeout让子指令渲染，然后执行操作并通过执行

使您的选择相对

element.find("input[name=foo]").closest(".control-group")

或者你甚至可以做到

 element.find(".control-group")`

如果可行的话，

针对更通用的angular.element("input[name=foo]")：

     $timeout(function () {
        element.find(".control-group").addClass("warning");
     }, false);

<强> Fiddle

父指令AngularJS无法访问已转换的内容

1 个答案: