uttesh / ngletteravatar

directive for the letter avatar for the given string like gmail, first letter of the given data will be the avatar .
http://uttesh.github.io/ngletteravatar/
MIT License
136 stars 36 forks source link

Data element not working inside a modal view #34

Open thesourav123 opened 7 years ago

thesourav123 commented 7 years ago

Hi, I am trying to achieve it inside a modal view but its not working. The data attribute is not taking the scope value. Its working under normal view

<ion-modal-view>
     <ion-header-bar class="bar bar-header">
          <h1 class="title">Employee Details</h1>
          <button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
        </ion-header-bar>
    <ion-content has-header="true" padding="true">
        <div class="list card">
              <div class="item item-avatar">
                <ng-letter-avatar charCount="2" fontSize = "25px" avatarborder="true" avatarcustombgcolor="green" data={{employee.fullName}} shape="round"></ng-letter-avatar>
                <div class = "empname">{{employee.firstName}} {{employee.lastName}}</div>
                <p>{{employee.title}}</p>
            </div>
            <a class="item item-icon-left" href="#/employees/{{employee.managerId}}" ng-if="employee.managerId > -1"><i class="icon ion-ios7-person"></i>View Manager<p>{{employee.managerName}}</p></a>
            <a class="item item-icon-left" href="#/employees/{{employee.id}}/reports" ng-if="employee.reports > 0"><i class="icon ion-person-stalker"></i>View Direct Reports<p>{{employee.reports}}</p></a>
            <a class="item item-icon-left" href="tel:{{employee.officePhone}}"><i class="icon ion-ios7-telephone"></i>Call Office<p>{{employee.officePhone}}</p></a>
            <a class="item item-icon-left" href="tel:{{employee.cellPhone}}"><i class="icon ion-ios7-telephone"></i>Call Cell<p>{{employee.cellPhone}}</p></a>
            <a class="item item-icon-left" href="sms:{{employee.cellPhone}}"><i class="icon ion-chatbox-working"></i>SMS<p>{{employee.cellPhone}}</p></a>
            <a class="item item-icon-left" href="mailto:{{employee.email}}"><i class="icon ion-ios7-email"></i>Email<p>{{employee.email}}</p></a>
        </div>

    </ion-content>
</ion-modal-view>
gtopsis commented 6 years ago

Put Data value inside double quotes. Also, maybe you should remove px from fontsize attribute

aneguzman commented 6 years ago

Hi guys, thanks for the awesome directive.

Something similar happened to me when using this directive in a modal view. My case was a little bit different since the data value was set after an ajax request was made. Setting the attribute "dynamic=true" did the trick for me.