javascript - AngularJS ng-click 和回调函数

Question

在我的网络应用程序中，有两种用户: guest 和已登录。主页为每个加载相同的内容。

我的目标:

• 当注册用户点击链接时，2 个 ajax 请求 ($http) 检索 另一个页面的数据并将它们加载到模型中。
• 如果用户是访客，则会出现另一个模型，提示他必须注册。

我的链接:

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

访客操作:

$scope.guestAction = function($event, 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');
            console.log(callbackB);
            eval('$scope.'+callbackB);
        }

    });

}

这样，如果发现客人，我们将返回 false 并停止执行。如果是普通用户，我们执行函数 showOne。因为我想一个接一个地执行 2 个异步请求，所以我选择使用回调技巧。

问题是 showOne() 是在 ng-click 启动时直接执行的。我尝试将 showOne() 作为字符串传递，并将 eval() 作为 GuestAction 中的字符串传递，但参数未定义...

知道如何解决这个问题吗？我想使用一种通用方法，它仅在用户登录时才触发一个函数。

Answer 1

我会推荐使用服务和 promise ，see this AngularJS $q

你不必为 $http 请求使用服务，但这只是我的偏好，它使你的 Controller 更干净

这是 promise 的服务:

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

然后在我们的 Controller 中我们会这样调用它:

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

现在很明显，您可能必须在这里和那里进行一些更改才能使其满足您的需求，但是 promise 所做的是允许您执行代码，一旦返回 promise 然后继续，我相信您正在寻找这样的东西为。