ng-单击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"<button ng-click="followMe({{ oUserInfo.id }})" class="followButton button button-bar__button {{ oUserInfo.follow_class }}" style="line-height:20px; width:72px; padding:0 5px; margin-left:-15px;">"UserInfo.id%20%7D%7D)&p4=%7B%oUserInfo.id%20%7D%7D)
    at Error (native)
    at http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:6:416
    at Object.q.throwError (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:209:32)
    at Object.q.object (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:208:327)
    at Object.q.primary (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:205:335)
    at Object.q.unary (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:205:174)
    at Object.q.multiplicative (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:204:434)
    at Object.q.additive (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:204:261)
    at Object.q.relational (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:204:96)
    at Object.q.equality (http://localhost:8080/ItApp_1/onsen/js/angular/angular.min.js:203:425)

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:-

<ons-page ng-controller="ProfileInfoCtrl" class="profile-page">
<ons-toolbar fixed-style>
    <div class="left">
        <ons-toolbar-button ui-sref="sliding.main">
            <ons-icon icon="ion-ios-home" style="vertical-align:-4px;"></ons-icon>
        </ons-toolbar-button>
    </div>
    <div class="center navigation-bar__title">
        {{ oUserInfo.first_name }}  {{ oUserInfo.last_name }}   
    </div>
    <div class="right" ng-controller="FollowBtnCtrl">           
        <ons-toolbar-button>                                        
            <button ng-click="followMe({{ oUserInfo.id }})" class="followButton button button-bar__button {{ oUserInfo.follow_class }}" 
                    style="line-height:20px; width:72px; padding:0 5px; margin-left:-15px;">
                {{ oUserInfo.follow_text }}
            </button>           
        </ons-toolbar-button>
    </div>
</ons-toolbar>

<div class="profile-card">
    <img class="profile-image" src="{{ oUserInfo.profile_pic }}" alt="{{ oUserInfo.first_name }} {{ oUserInfo.last_name }}">  
    <div class="profile-name">{{ oUserInfo.first_name }} {{ oUserInfo.last_name }}</div>
    <div class="profile-id">{{ oUserInfo.email }}</div>
    <div class="profile-desc">{{ oUserInfo.gender }} , Age - {{ oUserInfo.age }}  Years</div>
</div>

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

Answer 1

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

<button ng-click="followMe(oUserInfo.id)" class="followButton button button-bar__button {{ oUserInfo.follow_class }}"

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