1

Is it possible to conditionally include an ng-click into the dom? Both my desktop view and mobile view share the same template, but I only need the ng-click in the desktop view.

For example, in my desktop view I want something like this:

<div class="maincontent" ng-click="clickEvent()">
    <div>Content</div>
</div>

... and in my mobile view I want something like this:

<div class="maincontent">
    <div>Content</div>
</div>
Nirali
  • 33
  • 3
developthewebz
  • 1,827
  • 3
  • 17
  • 43

1 Answers1

1

You could have some variable in scope which will tell you its mobile view or not by checking user agent and set a flag on basis of that isMobileView, and then you can use same template with ng-click for both mobile and desktop view.

Markup

<div class="maincontent" ng-click="isMobileView && clickEvent()">
    <div>Content</div>
</div>
Community
  • 1
  • 1
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • The issue is, the ng-click is still being rendered in the DOM in this case. Because of how this function is being used, the DOM in mobile must be rendered without the ng-click present. – developthewebz Oct 07 '15 at 18:03
  • @JordanMcRae by using the above markup, you will have `ng-click` on mobile, but that will never get execute the function.. I don't understand why you don't want to render `ng-click` while rendering mobile view? – Pankaj Parkar Oct 07 '15 at 18:05
  • Basically, clickEvent() is being called on a form to close a datepicker when clicking outside of it on desktop (to fix an IE specific issue). The problem is, in this form is a select dropdown. Because clickEvent() is being called on the form, I can't open the select dropdown because clickEvent() is being fired when it is present in the DOM. – developthewebz Oct 07 '15 at 18:08