AngularJS ng-click和回調函數

在我的web應用程序中，有兩種用戶：guest登錄&。主頁面爲每個頁面加載相同的內容。AngularJS ng-click和回調函數

我的目標：

當註冊用戶點擊鏈接時，2個Ajax請求（$ HTTP）檢索另一個網頁的的數據，並在模型加載它們。
如果用戶是訪客，則出現另一個模型，說他必須註冊。

我的鏈接：

<h4 ng-click="guestAction($event, showOne($event,card.id));">click me</h4>

GuestAction：

這樣一來，如果客人有斑點，我們返回false，並停止執行。如果它是一個普通用戶，我們執行showOne函數。由於我想一個接一個地執行2個異步請求，因此我選擇使用回調技巧。

問題在於啓動ng-click時直接執行showOne()。我試圖通過showOne()作爲一個字符串，而eval()字符串在GuestAction，但參數變得未定義...

任何想法如何解決這個問題？我想使用一個通用的方法，只有當用戶登錄時纔會觸發一個函數。

來源

2014-02-27 Magister

showOne被執行，因爲你是在HTML調用它。您需要將它作爲showOne（不帶（））傳遞。也不要在angularjs中使用'eval'。 – Wawy

我會建議使用的服務和承諾，see this AngularJS $q

您不必使用服務爲$ HTTP請求，但是，這只是我的偏好，它使你的控制器有很多清潔

這裏是承諾服務：

app.factory('myService', function ($http, $q) { 

    var service = {}; 

    service.guestAction = function() { 
     var deferred = $q.defer(); 
     $http.get('/guest/is-guest/').success(function(data) { 
      console.log("isGuest retrieved : " + data); 
      if (data == 1) { 
       deferred.resolve(true); 
      } else { 
       deferred.resolve(false); 
      } 
     }).error(function (data) { 
      deferred.reject('Error checking server.'); 
     }); 
     return deferred.promise; 
    }; 

    return service; 
});

然後在我們的控制，我們將要求它像這樣：

app.controller('myController', function ($scope, myService) { 

    $scope.guestAction = function($event, card) { 
     myService.guestAction().then(function (data) { 
      if (data) { 
       alert('guest spotted !'); 
      } else { 
       alert('user'); 
       // Then run your showOne 
       // If this is also async I would use another promise 
       $scope.showOne($event, card.id); 
      } 
     }, function (error) { 
      console.error('ERROR: ' + error); 
     }) 
    }; 
});

現在很明顯，你可能要在這裏改變的事情，有得到它的工作對你的需要，但承諾要做的就是讓你執行代碼，一旦被返回的承諾再繼續下去，我相信這樣的事情是什麼你正在尋找。

來源

2014-02-27 14:45:05 jnthnjns

你要通過功能參數沒有括號，並在參數分別傳遞：

<h4 ng-click="guestAction($event,card.id, showOne);">click me</h4>

和

$scope.guestAction = function($event,id, callbackB) { 

    $http.get('/guest/is-guest/').success(function(data) { 
     console.log("isGuest retrieved : " + data); 
     if (data == 1) 
     { 
      alert('guest spotted !'); 
      return false; 
     } 
     else 
     { 
      alert('user'); 
      callbackB($event,id); 
     } 

    }); 

}

來源

2014-02-27 14:54:05

非常感謝，解決了我的問題。 :) 唯一的缺點是我必須在guestAction中傳遞變量，這使得它不那麼通用。但是對於我想要做的事情而言，這將是可以的。 – Magister

AngularJS ng-click和回調函數

回答

相關問題