Угловое обновление ng-show/ng-hide после вызова API

Я новичок в Angular и все еще пытаюсь понять, как все это работает, и лучшие практики. Мое приложение представляет собой одностраничное приложение Rails, использующее Angular.

Я работаю над частью, где пользователь может подписаться/отписаться от другого пользователя. В зависимости от того, как структурирована серверная часть (с использованием Mongo), подписчики встроены в пользовательскую модель.

Я бы хотел, чтобы это произошло, когда пользователь нажимает «Подписаться», он отправляет вызов API, чтобы подписаться на пользователя, а затем кнопка меняется с «подписаться» на «отписаться». У меня есть часть подписки и отмены подписки, работающая с API, просто не знаю, как переключить кнопку с подписки на отмену подписки и обратно при переключении.

Поскольку данные извлекаются для создания страницы профиля из модели пользователя, а подписка/отмена подписки не происходит в модели пользователя, я предполагаю, что привязки не работают автоматически. Я разработал это, увеличив/уменьшив количество подписчиков и добавив пользователя к подписчикам, вставив его в массив.

Просто нужна помощь с лучшей практикой переключения кнопки здесь. Здесь также открыт для любого другого рефакторинга.

Вот что я получил до сих пор...

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"}})
]

Спасибо!


person aressidi    schedule 20.02.2014    source источник


Ответы (1)


В вашем контроллере вам нужно будет добавить значение для isFollowing и обновлять его, затем из вашего пользовательского интерфейса/разметки вы можете сделать одну из нескольких вещей, вот две:

с двумя кнопками, переключающими видимость

<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>
person Brocco    schedule 20.02.2014
comment
Благодарю. Это было очень полезно. Особенно часть о том, как реализовать единственную кнопку. Я об этом не подумал! - person aressidi; 21.02.2014