2015-10-12 25 views
1

我正在使用基於移動的web應用程序,我使用angular jsonsen ui,我在用戶配置文件中創建了一個按鈕,用戶可以在其中跟隨另一個按鈕剛開始的時候用戶的配置文件加載,一個角控制器ProfileInfoCtrl設置所有用戶的相關信息,以他的個人資料頁,而其套在那裏我做了另一個控制器FollowBtnCtrl爲後續按鈕,並設置ng-click="followMe({{ oUserInfo.id }})"與我得到了在後續按鈕錯誤信息按鈕。獲取語法錯誤ng-click在angularjs中的按鈕

所有的值都設置正確,但在按鈕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) 

當我已經拋出的角度誤差的鏈接後,頁面給予的我下面的錯誤定義

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

我不理解我的錯,因爲我檢查了很多時間的所有語法,但沒有發現任何錯誤。請幫我&電話我哪裏做錯了,波紋管是HTML和角度控制器,

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> 

角位指示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){ 

      }); 
     } 
}]); 

角度控制器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; }); 
}]); 

回答

2

當您在ng-click屬性中設置參數時,您必須刪除{{ }}

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

你的價值屬性中設置應該是什麼有效的JavaScript語法。

+0

我已經刪除它,但它沒有得到oUserInfo.id的值,並向我展示'ng-click =「followMe(oUserInfo.id)」'在輸出html –

+0

我想在o內部打印oUserInfo.id followMe功能,那麼我需要做什麼。它有任何解決方案嗎?因爲在另一頁顯示多個用戶的列表中的與後續的按鈕 –

+0

有你在控制檯有一個新的錯誤呢? – ianaya89