Ng-Click切换后无法立即使用

Question

I currently have a like/unlike system implemented and it's working, but I am still having a small issue.

For some reason, when toggeling the like to unlike button, the unlike button will not function/trigger, unless I refresh the page. Though when unliking, I can instanly like.

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>

Above you can see that both buttons are identical, except for the markup and ng-click function that is being triggered.

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

    };

Anyone have an idea why this is and how I can fix it?

Answer 1

Basically the issue is due to scope. Update the code to show on object.like, etc (ex: ng-show="someObj.like"). And pass this object into your ngclick function.

I assume that this is a collection of things to like based on the code. If it isn't then the code isn't that hard to change.

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 for the collection of items

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

The mock services that I used to run the app.

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