CODEWITHSUNDEEP
angularjs
chrony
chrony

Reputation: 783

Transcluded content not accessible by parent directive AngularJS

My template uses two custom directives

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

The Parent Directive adds a class to the parent element of an input element with name=foo. That parent element is added by the child directive.

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>'
    }
});

However, I think the child directive hasn't parsed or done its job yet when the parent directive looks for the element. I'm providing the fiddle below as well:

http://jsfiddle.net/bsy8o1p4/

How can I make sure the child directive parses first before the parent?

Upvotes: 1

Views: 171

Answers (1)

PSL
PSL

Reputation: 123739

You would need to wait for one digest cycle to do that. You should let one digest cycle to finish so that the child directive would have rendered. Also note that you cannot select elements by tagname with jqlite selector (@ angular.element()). Use a $timeout to let the child directive render and then perform your action and make your selection relative by doing 

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

or you could even do 

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

against a more generic angular.element("input[name=foo]") if at all it works:

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

Fiddle

Upvotes: 2

Related Questions