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:{{webDesignColors.email}}" target="_blank" onclick="window.open('https://mail.google.com/mail/?view=cm&tf=1&to={{webDesignColors.email}}, '_blank');">Email me</a>

The problem

webdesigncolors.navayan.com 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

Solution

  • 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:{{webDesignColors.email}}" id="webdesigncolors-email">Email me</a>


angular
  .module('WDC')
  .controller('EmailController', function (Users, $scope, $routeParams, $route) {
      $scope.webDesignColors.email = 'email1@gmail.com';
      document.getElementById('webdesigncolors-email').onclick = function (element) {
         window.open('https://mail.google.com/mail/?view=cm&tf=1&to=' + element.target.href.split(':')[1], '_blank');
      };
  });

 

You might also like:

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