Recently had to use mailto: in href and callback function on onclick event at the same time to let google email (= gmail) understand and display the recipient’s email address.

Old code

<a id="webdesigncolors-email" href="mailto:{{}}" target="_blank" onclick="'{{}}, '_blank');">Email me</a>

The problem Gmail Angular error


Inspect the page and look at your console for error:

Interpolations for HTML DOM event attributes are disallowed. Please use the ng- versions (such as ng-click instead of onclick) instead.

  • Can’t get email address into gmail’s compose feature
  • Inline ‘onclick’ attracts XSS vulnerability. Anyway inline events are bad!
  • Interpolations for HTML DOM event attributes are disallowed in AngularJS
  • Is ‘target’ attribute really needed?
  • Code has complexity. Can we make it simpler and shorter?
  • If we remove mailto from href then local email client (say Outlook) don’t opened
  • If we remove onclick event gmail task can’t be completed


  • Keep the markup simple and shorter
  • Keep mailto in href but remove inline onclick
  • Trigger click event on element ID in Angular Controller
<a href="mailto:{{}}" id="webdesigncolors-email">Email me</a>

  .controller('EmailController', function (Users, $scope, $routeParams, $route) {
      $ = '';
      document.getElementById('webdesigncolors-email').onclick = function (element) {'' +':')[1], '_blank');


You might also like:

AngularJS learning and examples:
jQuery plugins:
WordPress plugins and solutions: