Wie bekomme ich die ID des Elements von Angular js

Question

Ich habe mehrere Artikel in Bezug auf diese, aber nicht die richtige Lösung für mein Problem. Ich bin mit Angular js 1.5 und Bootstrap 3.

Mein Code ist wie,

<a href="" class="noUnderline" data-trigger="focus" data-toggle="popover" data-placement="bottom" data-content = "{{helpSrv.helpMessage}}" > 
<i class="fa fa-info-circle infoCirc" ng-click="helpSrv.showPopOverInfo($event)" id="forecastAttainmentId"> </i> 
</a> 

ich die Popover wenn das i Symbol geklickt wird zeigen wollen. Jetzt ist helpSrv ein Dienst, der in Angular JS geschrieben wird. helpMessage wird von der id des Elements gewählt. helpSrv ist ein Dienst, wie zwei Dinge enthält,

var s = this 
s.helpInfo = { 
"forecastAttainmentId": "Some text" 
} 
s.showPopOverInfo = function (event) {  
     var helpSelect = event.target.id 
     s.helpMessage = s.helpInfo[helpSelect] 
     console.log(s.helpMessage) 
} 

Nun, wenn ich das i Symbol zum ersten Mal klicken, um es zeigt {{helpSrv.helpMessage}} im popover. Das nächste Mal zeigt es die tatsächliche Nachricht, d. H. Some text. Ich denke, dass die Verzögerung aufgrund des Funktionsaufrufs verursacht wird. Wie löst man das ?? Oder gibt es eine Möglichkeit, die id des Elements automatisch mit eckigen (ohne Plugin) zu bekommen, so dass ich data-content="{{helpSrv.helpInfo['id of the element']}}" verwenden kann, um die Nachricht für den Popover zu bekommen.

Answer 1

Sie können mit jQuery auf das i-Tag zugreifen, indem Sie $("#forecastAttainmentId").click(function(){...} verwenden. Außerdem müssen Sie helpSrv.helpMessage initialisieren, um die Daten sehen zu können, wenn das Popover zum ersten Mal geladen wird.

Answer 2

Es ist ungefähr AngularJs digest cycle. Versuchen Sie $ Timeout zu verwenden:

s.showPopOverInfo = function (event) {  
    $timeout(function(){ 
     var helpSelect = event.target.id; // Always end lines with a semicolon 
     s.helpMessage = s.helpInfo[helpSelect]; 
     console.log(s.helpMessage); 
    }, 0); 
};