如何克隆ui-sref

Question

I'm looking to write a directive that allows clicks on an outer element to clone the ui-sref of one of its contained elements such that clicking on the outer element behaves the same 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 tried an attribute directive that triggers the click

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

but this causes an infinite loop or something and doesn't work. How can I make it work? Or is there a better way to achieve this?

Answer 1

You aren't taking into consideration event bubbling. As it is now, any click event on the children will already bubble to the parent at which point you are telling it to click same element again ... thus infinite loop if the target you want is clicked

My suggestion would be to prevent propagation of the event on the <a> .

If the <a> itself is clicked, let browser handle the redirect and if any other part of parent is clicked use $location service to redirect using the href value that ui-sref generates.

Something like:

link: function(scope, element) {
  var $link = element.find(scope.selector).not(':disabled').first();
  // prevent bubbling on target link
  $link.click(function(e) {
    e.stopImmediatePropagation()
  });

  element.click(function(e) {
    // make sure target link wasn't element clicked
    if (e.target !== $link[0]) { // assumes no child tags in `<a>`
      $location.url($link.attr('href'));
    }
  });
}

You may need to adjust a bit depending on whether or not you are using html5mode

EDIT: it occurs to me after writing this that you may be able to trigger the click on the <a> instead of using $location since the event propagation (bubbling) is still prevented

Answer 2

<ANY clone-click=".is-clone-click:not(:disabled):not(.is-disabled)">
    <a class="is-clone-click" ui-sref="root.example">example</a>
</ANY>

I got it working like this . Some pointer disabled elements were able to be clicked thru making their container the e.target so I added .is-no-clone-click on those containers to ignore them.

app.directive('cloneClick', function() {
    var angular = require('angular');
    var ignore = '[href], [ui-sref], [ng-click], .is-no-clone-click, label, input, textarea, button, select, option, optgroup';

    return {
        restrict: 'A',
        scope: {
            selector: '@cloneClick'
        },
        link: function (scope, element) {
            element.click(function(e) {
                if (e.isTrigger) {
                    return;
                }

                var cloned = element.find(scope.selector).first();
                var target = angular.element(e.target);

                if (cloned.length && !cloned.is(target) && !target.is(ignore)) {
                    cloned.click();
                }
            });
        }
    };
});

Cursor can also be added via mouseover and a CSS class for that like

element.mouseover(function() {
    element.toggleClass('is-pointer', !!element.has(scope.selector).length);
});

But I didn't end up using this directive because I was able to create a CSS link masking solution to actually solve what I was trying to do instead.