Duplicated tweet button

[monchoz]

Hi!

First of all, congratulations for this project! Its awesome.

In my Angular JS project, I'm using the tweet button and sometimes It appears duplicated. This is my code (I'm using Jade template engine)

a(twitter 
          data-lang='es' 
          data-count='horizontal' 
          data-url='http://referi.co'
          data-via='ReferiApp'
          data-size='medium'
          data-text='EN VIVO: {{match.team1.name}} {{match.team1_score}}-{{match.team2_score}} {{match.team2.name}}')

[djds4rce]

Do you constantly update the scope? Can you put a debugger in the function renderTwitterButton and see if it gets called multiple times?

[monchoz]

Yes it does get called 2 times when I tried but sometimes the button displayed just once and the function got called twice. I just update the scope when the page is loaded.

Thanks

[chriseckman]

Its definitely coming in twice, but it's not on every load.

[djds4rce]

This bad! I'll get a fix by next week On Feb 7, 2016 10:46 PM, "Chris Eckman" [email protected] wrote:

Its definitely coming in twice, but it's not on every load.

— Reply to this email directly or view it on GitHub https://github.com/djds4rce/angular-socialshare/issues/60#issuecomment-181052779 .

[monchoz]

Appreciate!

[robertodugim]

I managed to solve this issue. I included a counter in the twitter directive. directive('twitter', ['$timeout', function($timeout) { return { link: function(scope, element, attr) { **var enterTwitterCreation = 0;** var renderTwitterButton = debounce(function() { **if (attr.url && enterTwitterCreation < 1) {** **enterTwitterCreation++;** $timeout(function() { element[0].innerHTML = ''; twttr.widgets.createShareButton( attr.url, element[0], function() {}, { count: attr.count, text: attr.text, via: attr.via, size: attr.size } ); }); } }, 75); attr.$observe('url', renderTwitterButton); attr.$observe('text', renderTwitterButton); } }; }])

[tjaussoin-luna]

robertodugim's solution does the job, even if it's a dirty fix.Did not manage to understand why it gets called 2 times sometimes?

[djds4rce]

Angular uses Dirty checking on the Plain javascript object. If you change anything on the scope it does not know which values are changed until it checks every value. Even for computed values it reruns the computation hence it gets called multiple times. A debounce function makes sure the directive is called only one within a time frame of 75 milliseconds. The ideal solution for this is increasing the deboucne count instead of doing the dirty fix. Can you please increase the debounce to say 200 milliseconds and let me know if this is still reproducible? Also I have been ignoring this project due to having a busy life. I promise to get back to it soon. Sorry!