Gravatar default watch for changes

[zyadsherif]

Hi,

I am trying to add the gravatar-src with gravatar-default in a ui-select dropdown, the problem is that the gravatar directive renders before the $select.selected object is set, so it ends up not rendering the fallback avatar correctly.

Note: the values are displayed correctly in the dropdown itself but not on the selected object that is retrieved using the $select.selected variable, and I've double checked that the data goes to the function correctly, I just believe it goes late after rendering.

This is the fallback function

    $rootScope.getFallbackGravatar = function(name, email) {
      if (name != 'undefined' && name != undefined && name.length > 0) {
        return "http://placehold.it/70/f1f1f1/2c3e50&text=" + name.substring(0,2).toUpperCase();       
      }else if (email != 'undefined' && email != undefined && email.length > 0){
        return "http://placehold.it/70/f1f1f1/2c3e50&text=" + email.substring(0,2).toUpperCase();       
      }else{
        return "http://placehold.it/70/f1f1f1/2c3e50&text=NA";       
      }
    };

And this is the ui-select code

            <ui-select ng-model="defaultAssignee.selected" theme="select2" search-enabled="false" ng-change="assigneeChange()">
              <ui-select-match placeholder="Select Assignee">
                <img gravatar-default="{{getFallbackGravatar($select.selected.name.name, $select.selected.name.email)}}" gravatar-src="$select.selected.name.email" alt="" class="user-thumb">
                <span>{{$select.selected.name.name}}</span>
              </ui-select-match>
              <ui-select-choices repeat="assignee in issue.assignee ">
                <img gravatar-default="{{getFallbackGravatar(assignee.name.name, assignee.name.email)}}" gravatar-src="assignee.name.email" alt="" class="user-thumb">
                <span>{{assignee.name.name}}</span>
              </ui-select-choices>
            </ui-select>  

[wallin]

Hi! Thanks for reporting.
hmm, seems like a priority issue. Could you try to set a negative priority on the gravatar directive and see if it solves your problem? (https://code.angularjs.org/1.2.27/docs/api/ng/service/$compile). If so, it might be a good idea to lower the default priority.

[zyadsherif]

I've tried to lower the priority to -20 and give the ui-select a much higher priority as well but that doesn't solve the problem

[wallin]

Ok. I'll try to look into this as soon as I get the chance. Would it be possible for you to create a JSFiddle that re-creates the problem?

[zyadsherif]

I'll create one, but the issue appeared in a lot of cases now as am using the directive extensively across the app that am building, the external templates that get called from another directives aren't also working when it comes to the gravatar-default.

Will try to cover all cases in the fiddle

[rajkumargithub]

any updates on this issue? I am also facing the similar issue!

[wallin]

Hi @rajkumargithub , thanks for reporting.
Sorry for the delay, but I haven't gotten around to dig deeper into this issue.
It you could provide a JSFiddle or similar, reproducing the error, it would be of great help

thanks!

[itsmill3rtime]

i'm having a similar issue. i have in my toolbar at the top of the page the gravatar image.
gravatar-src="currentUser.email" but it seems to sometimes load before that value is set. after my $http post that gets the currentUser object finishes and that currentUser.email value exists, it doesn't seem to update the gravatar.