ng-clickでng-repeatが正しく動作しない

Question

私はangularjsで私のスパでいくつかの新しい問題がありました。

これは私のHTMLをイスト：

<a ng-repeat="friend in chat.friendlist" ng-click="loadChat('{{friend.friend_username}}')" data-toggle="modal" data-target="#chat" data-dismiss="modal" class="list-group-item p-x-md"> 
 
        <i class="fa fa-circle text-success text-xs m-r-xs"></i> 
 
        <span>{{friend.friend_username}} - {{friend.gamename}}</span> 
 
       </a>

これは私のコントローラです：

"use strict"; 

    app.controller("chatCtrl", ["userService", "socket" , "chatService", "$scope", function (userService, socket , chatService, $scope) { 
     var self = this; 

     self.friendlist = chatService.friendlist; 

     chatService.init(userService.username); 

     $scope.loadChat = function (username) { 
      console.log(username); //console logs {{friend.friend_username}} 
      chatService.chatWith(username); 
     } 

    }]); 

すべてがloadChat関数内でユーザ名を除いて正常に動作しています。 ユーザー名のコンソールには{{friend.friend_username}}が記録され、friend.friend_usernameの値は記録されません。 DOM内ではすべてがうまく見えます。 ng-click = "loadChat（ 'USERNAME'）"は正しく表示されますが、チャットコントローラではユーザ名は{{friend.friend_username}}に設定されています。なぜこのようなことが起こるのかわからない。誰かが私にこれを理解させてくれることを願っています。

Answer 1

直接文字列補間

<a ng-click="loadChat(friend.friend_username)" > 

Answer 2

を使用しないでください、ngClickにユーザー名を渡すには、補間

ng-click="loadChat(friend.friend_username)"