Ng-Clickはトグル直後に動作しません

Question

現在、私は好き/違ったシステムを実装していますが、動作していますが、まだ問題はありません。

何らかの理由で、好きなボタンに切り替えると、ページを更新しない限り、違うボタンが機能しない/トリガーしません。私が好きではない時は、私は好きです。あなたの上

HTML

<span ng-click="likeCapture()" ng-show="like" class="clickable capture-action-buttons"><span class="glyphicon glyphicon-heart"></span> Like</span> 
<span ng-click="unlikeCapture()" ng-show="liked" class="clickable capture-action-buttons liked-markup"><span class="glyphicon glyphicon-heart"></span> Liked</span> 

トリガされているマークアップとngのクリック機能を除いて、両方のボタンが同一であることがわかります。これはなぜ

JS

/* -------------------------- Check if voted unlike Capture -------------------------- */ 
      // Check voted 
      var votes = res.data.votes; 

      if(votes.length == 0){$scope.like = true;} 
      votes.forEach(function(vote){ 
       if(vote.userId === auth.profile.user_id) { 
        $scope.liked = true; 
       } 
      }); 
      $scope.like = !$scope.liked; 



      // Unlike 
      $scope.unlikeCapture = function(){ 

       votes.forEach(function(vote){ 
        if(vote.userId === auth.profile.user_id) { 
         var voteId = vote._id; 

        voteApi.unlikeCapture(voteId).then(function(res) { 
          $scope.capture.votes.length--; 
         }); 
         $scope.liked = false; 
         $scope.like = true; 
        } 
       }); 
      }; 

/* --------------------------------- Like Capture ----------------------------------- */    
    $scope.likeCapture = function(){ 

     var likeObj = { 
      userId  : $scope.auth.profile.user_id, 
      userName : $scope.auth.profile.name, 
      votedFor : $scope.capture.userId 
     }; 

     var notificationObj = { 
          notificationFor  : $scope.capture.userId, 
          notificationFrom : auth.profile.user_id, 
          concirning   : 'like', 
          parameter   : id 
     }; 

     captureApi.likeCapture(id, likeObj) 
      .then(function(res){ 
        $scope.capture.votes.push(res); 
        $scope.liked = true; 
        $scope.like = false; 

        var likeId = res.data._id; 
        console.log(likeId); 
       if($scope.capture.userId !== auth.profile.user_id) { 
        voteApi.voteNotification(likeId, notificationObj) 
        .then(function(res){ 
         console.log(notificationObj); 
         console.log(likeId); 
        }); 
       } 
      }); 

    }; 

誰もがアイデアを持っていると私はそれを修正することができますか？

Answer 1

基本的に問題は範囲によるものです。 object.likeなどで表示するコードを更新します（例：ng-show = "someObj.like"）。このオブジェクトをngclick関数に渡します。

これはコードに基づいて好きなものの集合であると仮定します。そうでなければ、コードは変更するのが難しくありません。アイテムのコレクション

<div ng-controller="someController"> 
    <div ng-repeat='item in items'> 
     {{item.stuff}} 
     <span ng-click="likeCapture(item)" ng-show="!item.liked" class="clickable capture-action-buttons"><span class="glyphicon glyphicon-heart"></span> Like</span> 
     <span ng-click="unlikeCapture(item)" ng-show="item.liked" class="clickable capture-action-buttons liked-markup"><span class="glyphicon glyphicon-heart"></span> Liked</span> 
    </div> 
</div> 

私はアプリを実行するために使用されるモックサービスのための

angular.module("myApp", []).controller('someController', function ($scope, captureApi, voteApi) { 
    $scope.auth = { 
     profile: { 
      user_id: 1, 
      name: 'me' 
     } 
    }; 
    $scope.items = [{ 
     stuff: "stuff to like", 
     userId: 4, 
     userName: 'bob', 
     votes: [ 
      { 
       id: 123, 
       userId: 3 
      }, 
      { 
       id: 145, 
       userId: 2 
      }, 
      { 
       id: 187, 
       userId: 1 
      } 
     ] 
    }, 
    { 
     stuff: "stuff i don't like", 
     userId: 342, 
     userName: 'billy', 
     votes: [ 
      { 
       id: 201, 
       userId: 3 
      }, 
      { 
       id: 723, 
       userId: 2 
      } 
     ] 
    }]; 
/* -------------------------- Check if voted unlike Capture -------------------------- */ 
    angular.forEach($scope.items, function(item){ 
     // Check voted 
     if(item.votes.length == 0){ 
      item.liked = false; 
     }else{ 
      angular.forEach(item.votes, function(vote){ 
       if(vote.userId === $scope.auth.profile.user_id) { 
        item.liked = true; 
       } 
      }); 
     } 
    });   


    // Unlike 
    $scope.unlikeCapture = function(item){ 
     angular.forEach(item.votes, function(vote){ 
      if(vote.userId === $scope.auth.profile.user_id) { 
       captureApi.unlikeCapture(vote.Id).then(function(res) { 
        if(res && res.success){ 
         angular.forEach(item.votes, function(v, index){ 
          if(v.Id == vote.Id){ 
           item.votes.splice(index, 0); 
          } 
         }); 
        } 
       }); 
       item.liked = false; 
      } 
     }); 
    }; 

/* --------------------------------- Like Capture ----------------------------------- */    
    $scope.likeCapture = function(item){ 

     var notificationObj = { 
      notificationFor  : item.userId, 
      notificationFrom : $scope.auth.profile.user_id, 
      concerning   : 'like', 
      parameter   : item.id 
     }; 

     captureApi.likeCapture(item, $scope.auth.profile.user_id) 
      .then(function(res){ 
        item.votes.push(res.data); 
        item.liked = true; 
       if(item.userId !== $scope.auth.profile.user_id) { 
        voteApi.voteNotification(res.data.Id, notificationObj) 
        .then(function(res){ 
         console.log("notified owner", item); 
        }); 
       } 
      }); 

    }; 
}); 

のhtml。

angular.module("myApp").service('captureApi', function ($q) { 
    var voteCounter = 983; 
    return { 
     likeCapture: likeCapture, 
     unlikeCapture: unlikeCapture 
    } 
    function likeCapture(item, userId){ 
     var deferred = $q.defer(); 
     deferred.resolve({ 
      success: true, 
      data: { 
       Id: voteCounter++, 
       userId: userId 
      } 
     }) 
     return deferred.promise; 
    } 
    function unlikeCapture(id){ 
     var deferred = $q.defer(); 
     deferred.resolve({ 
      success: true 
     }) 
     return deferred.promise; 

    } 
}).service('voteApi', function ($q) { 
    return { 
     voteNotification: voteNotification 
    } 
    function voteNotification(){ 
     var deferred = $q.defer(); 
     deferred.resolve(true); 
     return deferred.promise; 
    } 
});