Question

我是Angular的新手，仍在努力了解它的运作方式和最佳做法。我的应用程序是使用Angular的单页Rails应用程序。

我正在处理一个用户可以关注/取消关注其他用户的文章。基于后端的结构方式（使用Mongo），关注者嵌入在用户模型中。

我想要发生的事情是，当用户点击关注时，它会发布API跟注来跟踪用户，然后该按钮会从＆＃39;关注＆＃39;要取消关注＆＃39;。我已经使用了跟随和取消关注的API，只是不知道如何切换按钮从关闭到取消关注和切换时切换。

由于数据被拉动以建立从所述用户模型中的简档页面，并且后续/取消关注是不会发生上的用户模型，I＆＃39; M猜测＆＃39;就是为什么绑定AREN＆＃39;吨自动工作。我通过递增/递减跟随者计数并通过将用户推送到数组来将用户添加到关注者中来解决这个问题。

在这里切换按钮的最佳做法需要帮助。也可以在这里打开任何其他重构。

这是我到目前为止所得到的......

users_controller：

recipe.controller "UsersCtrl", ['$scope', '$routeParams', 'User', 'Follower', ($scope, $routeParams, User, Follower) ->
  $scope.breadcrumb = $routeParams.id
  $scope.current_user_name = window.current_user_name
  $scope.user = User.get({id: $routeParams.id})
  $scope.addFollower = ->
    newFollower = new Follower({user_id: $scope.current_user_name, follower_id: $routeParams.id})
    newFollower.$save() # Add success / failure 
    $scope.user.followers.push({username: $scope.current_user_name})
    $scope.user.follower_count += 1
  $scope.removeFollower = ->
    removeFollower = new Follower({user_id: $scope.current_user_name, follower_id: $routeParams.id})
    removeFollower.$delete()
    $scope.user.follower_count -= 1

  $scope.myProfile = ->
    if $scope.current_user_name == $routeParams.id
      return true
    else
      return false
  $scope.followsUser = ->
    in_followers($scope.user.followers, $scope.current_user_name)

  in_followers = (array, username) ->
    i = 0  
    while i < array.length
      return (array[i].username is username)
      i++
    false
]

profile.html.haml

%button{"ng-click" => "addFollower()", "ng-hide" => "myProfile(); followsUser()", :class => "btn btn-primary"} FOLLOW
%button{"ng-click" => "removeFollower()", "ng-show" => "followsUser()", "ng-hide" => "myProfile()", :class => "btn btn-primary"} UNFOLLOW

follower.js.coffee

 recipe.factory 'Follower', ['$resource', ($resource) ->
  Follower = $resource("/api/users/:user_id/follows", {user_id: "@user_id", follower_id: "@follower_id"}, 
    delete: {method: "DELETE", url: "/api/users/:user_id/follows/:follower_id", params: {user_id: "@user_id", follower_id: "@follower_id"}})
]

谢谢！

Answer 1

在你的控制器中，你需要为isFollowing添加一个值并保持更新，然后从你的UI /标记你可以做一些事情，这里有两个：

带有两个按钮，切换可见性

<button ng-show="isFollowing" ng-click="removeFollower()">Unfollow</button>
<button ng-hide="isFollowing" ng-click="addFollower()">Follow</button>

或者您可以使用一个按钮更改按钮的文本，并公开一个名为setFollower的新函数，该函数将在内部调用addFollower或removeFollower

<button ng-click="setFollower()">{{ isFollowing ? 'Unfollow' : 'Follow' }}</button>

API调用后角度更新ng-show / ng-hide

1 个答案: