I've been attempting to transclude the content of an element and adjust its display property by binding a click event to one of its children. Unfortunately, it doesn't appear to be functioning as expected.
app.directive('apple', function(){
function link(scope, elem, attr, ctrl, transclude) {
elem.find('a.link').bind('click', function() {
$('ul.menu').toggleClass('active');
});
transclude(scope, function(clone) {
elem.html(clone);
});
}
return {
restrict: 'E',
transclude: true,
link: link
};
});
HTML:
<apple>
<a class="link" href="#">Show</a>
<ul class="menu">
<li>linky</li>
</ul>
</apple>
Any thoughts on why this may not be working? Link to fiddle: http://jsfiddle.net/pb2q4zj4/1/