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-click功能。

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函数。

我认为这是基于代码喜欢的东西的集合。如果不是那么代码就不那么难改变了。

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用于收集项目

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

切换后，Ng-Click无法正常工作

1 个答案: