I need to create a directive that enables clicks on an outer element to duplicate the ui-sref of one of its inner elements. This means that clicking on the outer element should have the same effect as clicking on the .cloned element.
<div clone-click=".cloned">
...
<a class="cloned" ui-sref="root.a" ng-if="true">example</a>
<a class="cloned" ui-sref="root.b" ng-if="false">example</a>
...
<a ui-sref="root.c">elsewhere</a>
...
</div>
I attempted to create an attribute directive to simulate the click action
app.directive('cloneClick', function() {
return {
restrict: 'A',
scope: {
selector: '@cloneClick'
},
link: function(scope, element) {
element.click(function() {
element.find(scope.selector).not(':disabled').first().click();
})
}
};
})
Unfortunately, this resulted in some sort of infinite loop and did not work as intended. How can I fix this issue? Or is there a better approach to achieving the desired functionality?