Check to see if something is already toggled in custom directive angularjs - json

Question

I have a toggle button I've created with a custom directive for "likes". Its using a JSON field with a true/false. The field is is_liked. I've got the toggle portion set up just fine, but I'm having some trouble checking to see wether the field is true or false before adding the toggle.
I need to somehow check to see if the field is already true/false so that button can show wether its already checked or not. Right now the toggle always starts off as unchecked regardless of if the field has been checked or not. Hopefully I'm explaining this well enough. My directive looks like this..
/*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;
};
}
};
}]);
So on each page load the like button will always start out as Like even if it has already been liked and should be showing Unlike. How do I check to see what state the button is currently in and apply the correct toggle action to it?

Answer 1

You can store a variable on the scope rather than the $scope when your directive loads
.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();
};
}
};
}]);