3

I have a text input which when focused(read:typed in) shows a dropdown containing an anchor element. And when the input loses focus, a function is fired using ng-blur as follows:

Markup:

<input type="text" ng-blur="hideDropdown()" ng-focus="getDropdownData()" />

Function:

scope.hideDropdown = function() {
    scope.hide_dropdown = true;
}

As you can see in the function, I set a variable hide_dropdown to true which in turn hides a dropdown containing an anchor element defined as follows:

<div ng-hide="hide_dropdown">
    //other li(s)
    <li>
        <a ng-href="remote_url" download>
            Download   
        </a>
    </li>
</div>

The problem I am facing is that I need to download a file using the anchor element mentioned. But when I click on the anchor element, instead of downloading the file, ng-blur takes precedence and hides the anchor element(using the function) and consequently, the file isn't downloaded.

How can I give more priority to ng-href? I need the file to be downloaded first and then ng-blur to be fired.

Tarun Dugar
  • 8,921
  • 8
  • 42
  • 79
  • How come clicking on anchor will fire `blur` event on `input` field? could you eloborate your problem with plunkr? – Pankaj Parkar Nov 29 '15 at 10:00
  • Well its like a typeahead. When I type into the text input, a dropdown appears containing the anchor element. And when I click on the anchor element, ng-blur gets fired because the text input loses focus(which is when ng-blur is fired). – Tarun Dugar Nov 29 '15 at 10:07
  • Then you should have mention this details in your question..please update your question with same information.. – Pankaj Parkar Nov 29 '15 at 10:12

0 Answers0