please am looking for a way to bind facebook like to my angularjs app, i already implemented easy app angularjs module, and everything is preety working fine.. how do i bind my ng click to the facebook like in such a way that it can only increase once and increment ones at the artistcontroller
<section ng-controller="MainCtrl">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<div class="row">
<div>
<button class="btn btn-primary" ng-click="login()" ng-disabled="loginStatus.status == 'connected'">Connect with Facebook</button>
<button class="btn btn-danger " ng-click="logout()" ng-disabled="!loginStatus || loginStatus.status != 'connected'">Logout</button>
<!--<button class="btn btn-success" ng-click="share()">FB.ui</button>-->
</div>
<div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
<input type="text" ng-model="search" class="form-control" placeholder="FILTER">
</div>
</div>
</div>
</div>
<div class="row text-center">
<p class="contest-text"> Welcome, <span ng-show="me.name">{{ me.name }}!</span></p>
<span ng-show="me.name"><p class="contest-text">Vote For Your Favourite Goodnight Kiss Picture Below</p></span>
<p class="contest-text"><span ng-show="me.error">Please Login To Vote</span></p>
</div>
<div class="row" style="padding-top:20px;" ng-if="loginStatus.status == 'connected'">
<div class="col-md-3" ng-repeat="item in contestant | filter: search | orderBy:artistOrder:direction" style="margin-bottom:30px">
<div class="row text-center">
<p>
<img ng-src="uploads/{{item.ImageUrl}}" class="vote-img">
</p>
</div>
<div class="row ">
<div class="col-md-6 text-center">
<p class="contest-text">{{item.Name}}</p>
</div>
<div class="col-md-6 text-center">
<p class="contest-text"><span class="glyphicon glyphicon-thumbs-up"> {{item.Votes}} Votes </span></p>
</div>
</div>
<div class="row text-center">
<p class="contest-text voters"><a class="btn btn-warning" ng-click="upVote(item);"><b> VOTE</b></a> <button class="btn btn-success" ng-click="share()">SHARE</button></p>
</div>
</div>
</div>
<div class="row" style="padding-top:20px;" ng-if="!loginStatus || loginStatus.status != 'connected'">
<div class="col-md-3" ng-repeat="item in contestant | filter: search | orderBy:artistOrder:direction" style="margin-bottom:30px">
<div class="row text-center">
<p>
<img ng-src="uploads/{{item.ImageUrl}}" class="vote-img">
</p>
</div>
<div class="row ">
<div class="col-md-6 text-center">
<p class="contest-text">{{item.Name}}</p>
</div>
<div class="col-md-6 text-center">
<p class="contest-text"><span class="glyphicon glyphicon-thumbs-up"> {{item.Votes}} Votes </span></p>
</div>
</div>
<!-- <div class="row text-center">
<p class="contest-text voters"><b> Please Login To VOTE</b></p>
</div>-->
</div>
</div>
</div>
</section>
app.js controller code
var myApp = angular.module('votingApp', ['ezfb','ngRoute','artistController'])
.config(function (ezfbProvider) {
/**
* Basic setup
*
* https://github.com/pc035860/angular-easyfb#configuration
*/
ezfbProvider.setInitParams({
appId: 'xxxxxx'
});
})
.controller('MainCtrl', function($scope, ezfb, $window, $location, $q) {
updateMe();
updateLoginStatus()
.then(updateApiCall);
/**
* Subscribe to 'auth.statusChange' event to response to login/logout
*/
ezfb.Event.subscribe('auth.statusChange', function (statusRes) {
$scope.loginStatus = statusRes;
updateMe();
updateApiCall();
});
$scope.login = function () {
/**
* Calling FB.login with required permissions specified
* https://developers.facebook.com/docs/reference/javascript/FB.login/v2.0
*/
ezfb.login(null, {scope: 'email,user_likes'});
/**
* In the case you need to use the callback
*
* ezfb.login(function (res) {
* // Executes 1
* }, {scope: 'email,user_likes'})
* .then(function (res) {
* // Executes 2
* })
*
* Note that the `res` result is shared.
* Changing the `res` in 1 will also change the one in 2
*/
};
$scope.logout = function () {
/**
* Calling FB.logout
* https://developers.facebook.com/docs/reference/javascript/FB.logout
*/
ezfb.logout();
/**
* In the case you need to use the callback
*
* ezfb.logout(function (res) {
* // Executes 1
* })
* .then(function (res) {
* // Executes 2
* })
*/
};
$scope.share = function () {
var no = 1,
callback = function (res) {
console.log('FB.ui callback execution', no++);
console.log('response:', res);
};
ezfb.ui(
{
method: 'feed',
name: 'angular-easyfb API demo',
picture: 'http://plnkr.co/img/plunker.png',
link: 'http://plnkr.co/edit/qclqht?p=preview',
description: 'angular-easyfb is an AngularJS module wrapping Facebook SDK.' +
' Facebook integration in AngularJS made easy!' +
' Please try it and feel free to give feedbacks.'
},
callback
)
.then(callback);
};
/**
* For generating better looking JSON results
*/
var autoToJSON = ['loginStatus', 'apiRes'];
angular.forEach(autoToJSON, function (varName) {
$scope.$watch(varName, function (val) {
$scope[varName + 'JSON'] = JSON.stringify(val, null, 2);
}, true);
});
/**
* Update api('/me') result
*/
function updateMe () {
ezfb.getLoginStatus()
.then(function (res) {
// res: FB.getLoginStatus response
// https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
return ezfb.api('/me');
})
.then(function (me) {
// me: FB.api('/me') response
// https://developers.facebook.com/docs/javascript/reference/FB.api
$scope.me = me;
});
}
/**
* Update loginStatus result
*/
function updateLoginStatus () {
return ezfb.getLoginStatus()
.then(function (res) {
// res: FB.getLoginStatus response
// https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
$scope.loginStatus = res;
});
}
/**
* Update demostration api calls result
*/
function updateApiCall () {
return $q.all([
ezfb.api('/me'),
ezfb.api('/me/likes')
])
.then(function (resList) {
// Runs after both api calls are done
// resList[0]: FB.api('/me') response
// resList[1]: FB.api('/me/likes') response
$scope.apiRes = resList;
});
}
});
controller.js
var artistController = angular.module("artistController", []);
//artistController.directive("otcdynamic", function($compile){
// return{
// restrict: 'A',
// link: function(scope, element){
// var template = "<div class='selector'> <a class='btn btn-lg btn-warning' ng-click='upVote(item)'><b> VOTE</b></a></div>";
// var linkFn = $compile(template);
// var content = linkFn(scope);
// element.append(content);
// }
// }
//});
//artistController.factory('facebook', [function() {
// return FB;
//}]);
artistController.controller("LoginCtrl",['$scope',function($scope)
{
$scope.notAuthorized = true;
}]);
artistController.controller("ListController", ['$scope', '$http',function($scope, $http){
$http.get('ajax/getContestant.php').success(function(data){
$scope.contestant = data;
// $scope.artistOrder = 'name';
});
$scope.upVote = function(item){
item.Votes++;
updateVote(item.ID,item.Votes);
};
function updateVote(id,votes){
$http.post('ajax/updateVote.php?id='+id+'&votes='+votes);
}
}]);
artistController.controller("DetailsController", ['$scope', '$http','$routeParams',function($scope, $http,$routeParams){
$http.get('js/data.json').success(function(data){
$scope.artists = data;
$scope.whichItem = $routeParams.itemID;
if ($routeParams.itemID > 0) {
$scope.prevItem = Number($routeParams.itemID) -1;
}
else{
$scope.prevItem = $scope.artists.length -1;
}
if ($routeParams.itemID < $scope.artists.length -1) {
$scope.nextItem = Number($routeParams.itemID) +1;
}
else{
$scope.nextItem = 0;
}
});
}]);