Функция AngularJS ng-click не приводит информацию к новому виду

Question

Я пытаюсь составить список друзей. Я настроил его так, чтобы пользователь мог искать друзей и нажимать на их изображение, чтобы увидеть их профиль, и это приведет их к профилю, где отображается информация, которую я имею в массиве в моем сервисе. У меня есть кнопка «добавить друга», которая при нажатии изменяется на кнопку «удалить друга» и предполагается добавить этого друга в новое представление html. Есть несколько проблем, с которыми я сталкиваюсь, я не могу понять. 1) кнопка меняется для каждого пользователя, когда нажимается только на 1 профиль пользователя. 2) пользователь не добавляется в представление друзей.

Вот мой код услуги:

var friendProfile = {}; 
 
    var userFriends = []; 
 

 
    this.addFriend = function(profileObj) { 
 
     userFriends.push(profileObj); 
 
    }; 
 

 
    this.removeFriend = function(profileObj) { 
 
    for(var i = userFriends.length - 1; i >= 0; i--) { 
 
     if (userFriends[i].name === profileObj.name) { 
 
     userFriends.splice(i, 1); 
 
     } 
 
    } 
 
    };

Вот мой контроллер:

$scope.friendProfile = {}; 
 
    $scope.userFriends = []; 
 
    $scope.currentlyFriends = false; 
 

 
    $scope.addFriend = function(profileObj) { 
 
    mainSvrc.addFriend($scope.friendProfile); 
 
    $scope.currentlyFriends = true; 
 
    }; 
 

 
    $scope.removeFriend = function(profileObj) { 
 
    mainSvrc.removeFriend 
 
    ($scope.friendProfile); 
 
    $scope.currentlyFriends = false; 
 
    };

Вот HTML:

/*profile view with buttons*/ 
 

 
<button class="friend-profbutton" 
 
     ng-click="addFriend(friendProfile)" 
 
     ng-hide="currentlyFriends">ADD FRIEND</button> 
 

 
     <button class="friend-profbutton" 
 
     ng-click="removeFriend(friendProfile)" 
 
     ng-show="currentlyFriends">REMOVE FRIEND</button> 
 
    </div> 
 

 

 
/*friends list it should be coming too*/ 
 
     <div ng-repeat="friend in userFriends" ui-sref="friend-profile({id:friend.id})" class="picture-wrapper"> 
 
      <img ng-src="{{friends.profileUrl}}" class="friend-profilePic"> 
 
      <div class="box"> 
 
       <div class="overlay"> 
 
       <p class="overlay-text">{{friends.name}}</p> 
 
       <a class="view-proflink">View Profile</a> 
 
       </div> 
 
      </div> 
 
     </div>

.state('friend-search', { 
 
      url: '/friend-search', 
 
      templateUrl: '/views/templates/friend-search.html', 
 
      controller: 'friendSearchCtrl' 
 
     }) 
 

 
     .state('friend-profile', { 
 
      url: '/friend-profile/:id', 
 
      templateUrl: 'views/templates/friend-profile.html', 
 
      controller: 'friendProfileCtrl' 
 
     }) 
 

 
     .state('friends', { 
 
      url: '/friends', 
 
      templateUrl: '/views/templates/friends.html', 
 

 
     });

Может кто-нибудь увидеть, что я могу делать неправильно?

Answer 1

К вашим услугам, вы ничего не возвращаете.

Вы можете попробовать в службе:

this.userFriends = []; 

    this.addFriend = function(profileObj) { 
     this.userFriends.push(profileObj); 
    }; 

    this.removeFriend = function(profileObj) { 
    for(var i = this.userFriends.length - 1; i >= 0; i--) { 
     if (this.userFriends[i].name === profileObj.name) { 
     this.userFriends.splice(i, 1); 
     } 
    } 
    }; 

и в контроллере:

$scope.friendProfile = {}; 
    $scope.userFriends = mainSvrc.userFriends ; 
    $scope.currentlyFriends = false; 

    $scope.addFriend = function(profileObj) { 
    mainSvrc.addFriend($scope.friendProfile); 
    $scope.userFriends = mainSvrc.userFriends ; 
    $scope.currentlyFriends = true; 
    }; 

    $scope.removeFriend = function(profileObj) { 
    mainSvrc.removeFriend($scope.friendProfile); 
    $scope.currentlyFriends = false; 
    $scope.userFriends = mainSvrc.userFriends ; 
    }; 

и правильно:

<div ng-repeat="friend in userFriends" class="picture-wrapper"> 
    <div ui-sref="friend-profile({id:friend.id})"> 
     <img ng-src="{{friend.profileUrl}}" class="friend-profilePic"> 
     <div class="box"> 
      <div class="overlay"> 
       <p class="overlay-text">{{friend.name}}</p> 
       <a class="view-proflink">View Profile</a> 
      </div> 
     </div> 
    </div> 
</div>