Question

我有一个切换按钮，我用“喜欢”的自定义指令创建。它使用带有true / false的JSON字段。该字段为 is_liked 。我已经将切换部分设置得很好，但是在添加切换之前我在检查字段是真还是假时遇到了一些麻烦。

我需要以某种方式检查字段是否已经为真/假，以便按钮可以显示已经检查过的字段。此时，无论是否已检查字段，切换始终以未选中状态开始。希望我能够很好地解释这一点。我的指令看起来像这样..

/*jshint unused:false */
/*global _:false */
/*global $:false */

'use strict';

angular.module('hscApp')

    .directive('likes' ,['$http',function ($http)
    {
        return {
            restrict: 'A',
            scope: { event: '=' },
            template: '<div ng-click="togglelike()">'+
                '<a ng-hide="isliked"><i class="icon-star"></i>Like</a>'+
                '<a ng-show="isliked"><i class="icon-star">Unlike</i></a>'+
                '</div>',
            link: function($scope){
                $scope.isliked = $scope.event.is_liked;
                $scope.togglelike = function(){
                    $scope.eventid = $scope.event.id;
                    $scope.classes = $scope.event.class;
                    if ($scope.isliked){
                        var url = 'http://www.test.com/api/v1/user_favorites/0.json';
                        var del = $.param({listing_type: $scope.classes, listing_id: $scope.eventid, _method: 'delete'});
                        $http({
                            method: 'POST',
                            url: url,
                            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                            data: del
                        });
                    }
                    else {
                        var urls = 'http://www.test.com/api/v1/user_favorites.json';
                        var dels = $.param({listing_type: $scope.classes, listing_id: $scope.eventid});
                        $http({
                            method: 'POST',
                            url: urls,
                            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                            data: dels
                        });
                    }
                    $scope.isliked = !$scope.isliked;
                };
            }
        };
    }]);

因此，在每个页面加载时，like按钮将始终以赞开头，即使它已被喜欢并应显示与不同。如何检查按钮当前处于什么状态并对其应用正确的切换操作？

Answer 1

当指令加载

时，您可以在范围而不是$ scope上存储变量

.directive('likes' ,['$http',function ($http)
{
    return {
        restrict: 'A',
        scope: { event: '=',
            isLikedLocal: "=" // can pass this in as a param, otherwise you can make it one way data bound using @ instead of =
        },
        template: '<div ng-click="togglelike()">'+
            '<a ng-hide="isLikedLocal"><i class="icon-star"></i>Like</a>'+
            '<a ng-show="isLikedLocal"><i class="icon-star">Unlike</i></a>'+
            '</div>',
        link: function($scope){ // use function link(scope, element, attrs) instead for consistency
            scope.isLikedLocal= $scope.event.is_liked;
            $scope.eventid = $scope.event.id;
            $scope.classes = $scope.event.class;
            scope.togglelike = function(){
                if (scope.isLikedLocal){
                   unlike();
                }
                else {
                    like();
                }      
                scope.isLikedLocal= !scope.isLikedLocal;
            }


                function unLike(){
                    var url = 'http://www.test.com/api/v1/user_favorites/0.json';
                    var del = $.param({listing_type: $scope.classes, listing_id: $scope.eventid, _method: 'delete'});
                    $http({
                        method: 'POST',
                        url: url,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: del
                    });
                }

                function like(){
                    var urls = 'http://www.test.com/api/v1/user_favorites.json';
                    var dels = $.param({listing_type: $scope.classes, listing_id: $scope.eventid});
                    $http({
                        method: 'POST',
                        url: urls,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                        data: dels
                    });
                }

                function getLike(){
                    //some http ajax call to get current status of button
                    $http.get().then(...)
                    scope.isLikedLocal = result from get call
                }

                // initializing the directive should make an ajax call, unless you are passing the data in as a parameter
                getLike();
            };
        }
    };
}]);

检查是否已经在自定义指令angularjs中切换了某些内容

1 个答案: