javascript - AngularJS ng-click 功能不会将信息带入新 View

Question

我正在尝试列出一个 friend 列表。我已将其设置为用户可以搜索 friend 并单击他们的图像以查看他们的个人资料，这会将他们带到个人资料，其中显示了我在服务中的数组中显示的信息。我有一个“添加 friend ”按钮，单击该按钮后，会变成“删除 friend ”按钮，并且应该将该 friend 添加到新的 html View 中。我遇到了一些我似乎无法解决的问题。1) 当仅单击 1 个用户个人资料时，每个用户的按钮都会发生变化。2) 用户没有被添加到好友 View 中。

这是我的服务代码:

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);
      }
    }
  };

这是我的 Controller :

$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);
      }
    }
  };

在你的 Controller 中:

  $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>