Getting Syntax Error inside ng-click of a button in angularjs

Question

I am working in a mobile based web application, i am using angular js with onsen ui, I made a follow button in user's profile, where a user can follow to another, in the beginning when user's profile loads, a angular controller ProfileInfoCtrl sets all the user's related information to his profile page, while its sets the information i got a error in the follow button where i made a another controller FollowBtnCtrl for the follow button and set ng-click="followMe({{ oUserInfo.id }})" with the button.

All the values has been setann fine but inside the follow button ng-click="followMe({{ oUserInfo.id }})" its give me the following error in the browser's console.

Error:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=11&p3=followMe(%7B%7B"

when i have gone throw the angular error link then the page give's me the following error definition

Syntax Error: Token '{' invalid key at column 11 of the expression [followMe({{""UserInfo.id }})] starting at [{4}].

i am not understanding where i am wrong, because i have checked many time's all the syntax's but nothing found any wrong. Please help me & tel me where i am doing wrong, bellow are the html and angular controllers,

HTML:-



    
        
            
        
    
    
        {{ oUserInfo.first_name }}  {{ oUserInfo.last_name }}   
    
               
                                                
                       
        
    



      
    {{ oUserInfo.first_name }} {{ oUserInfo.last_name }}
    {{ oUserInfo.email }}
    {{ oUserInfo.gender }} , Age - {{ oUserInfo.age }}  Years

Angular contoller ProfileInfoCtrl:-

app.controller("ProfileInfoCtrl", 
    [ '$scope', '$http', '$stateParams',
    function($scope, $http, $stateParams){      
        $scope.oUserInfo = null;

        if(!isNaN($stateParams.uid) && !isNaN($stateParams.id)){
            var parameter = JSON.stringify({type:"user_info", user_id: $stateParams.id, ouser_id: $stateParams.uid});                       
            $http({
                url: 'AjaxController',
                dataType: 'json',
                method: 'POST',
                data: parameter,
                headers: {
                    "Content-Type": "application/json"
                }
            }).success(function(data, status, header, config){
                $scope.oUserInfo = data;
            }).error(function(data, status, header, config){

            });
        }
}]);

Angular contoller FollowBtnCtrl:-

app.controller("FollowBtnCtrl", 
    [ '$scope', '$http', '$stateParams',
    function($scope, $http, $stateParams){
        // Make an AJAX call, retrieving the state.
        $scope.followMe = function($fId){

            var $button = angular.element(jQuery.find(".followButton"));            
            var $requestType = "";
            $button.attr('disabled','disabled');

            if($button.hasClass('following')){
                $requestType = "unfollow";              

                var request = {    
                    method: 'POST',
                    url: 'follower.ajax?requestType=' + $requestType + '&fId=' + $fId       
                }
                $http(request).
                    then(function(response){
                        if(response.data.type == "success"){
                            $scope.userinfo.following_count = $scope.userinfo.following_count - 1;
                            $button.addClass('btn-primary');
                            $button.removeClass('btn-success');
                            $button.removeClass('following');       
                            $button.text('Follow');                         
                        }
                        else{
//                          alert('Error !!');            
                        }
                        $button.removeAttr('disabled'); 
                    }, 
                    function(response){
//                      alert('Error !!');              
                        $button.removeAttr('disabled'); 
                });         

            } 
            else {
                $requestType = "follow";                                

                var request = {    
                    method: 'POST',
                    url: 'follower.ajax?requestType=' + $requestType + '&fId=' + $fId
                }
                $http(request).
                    then(function(response){
                        if(response.data.type == "success"){
                            $scope.userinfo.following_count = $scope.userinfo.following_count + 1;
                            $button.removeClass('btn-primary');
                            $button.addClass('btn-success');
                            $button.addClass('following');
                            $button.text('Following');
                        }
                        else{
//                          alert('Error !!');            
                        }
                        $button.removeAttr('disabled'); 
                    }, 
                    function(response){
//                      alert('Error !!');                  
                        $button.removeAttr('disabled'); 
                });                         
            }
        }
        $scope.sprocketInfo = 
            $http.get("/api/sprocket/" + $stateParams.id)
                .then(function(res){ return res.data; });
}]);

ianaya89 · Accepted Answer

You have to remove {{ }} when you set the argument in the ng-click attribute.



What you set as value within the attribute should be valid javascript syntax.

Getting Syntax Error inside ng-click of a button in angularjs

Answers (1)

Related Questions