javascript - 在angularjs中单击按钮的ng-click中获取语法错误

Question

我在一个基于移动的网络应用程序中工作，我正在使用 angular js 和 onsen ui，我在用户的个人资料中制作了一个关注按钮，用户可以在其中关注另一方面，在开始加载用户的个人资料时， Angular Controller ProfileInfoCtrl 将所有用户的相关信息设置到他的个人资料页面，同时它设置的信息我在我制作的关注按钮中遇到错误另一个 Controller FollowBtnCtrl 用于跟随按钮，并使用按钮设置 ng-click="followMe({{ oUserInfo.id }})"。

所有值都已设置好，但在关注按钮 ng-click="followMe({{ oUserInfo.id }})" 内，它在浏览器的控制台中给我以下错误。

错误:

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)

当我抛出 Angular 错误链接时，页面会给我以下错误定义

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

我不明白我哪里错了，因为我检查了很多次所有的语法，但没有发现任何错误。请帮助我并告诉我哪里做错了，下面是 html 和 Angular Controller ，

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

当您在 ng-click 属性中设置参数时，您必须删除 {{ }}。

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

您在属性中设置的值应该是有效的 javascript 语法。