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

Question

我创建了一个切换按钮，其中包含“喜欢”的自定义指令。它使用带有真/假的 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 开头，即使它已经被喜欢并且应该显示 Unlike。如何检查按钮当前处于什么状态并对其应用正确的切换操作？

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