Using AngularJS to handle ng-click events and callback functions

Question

Using AngularJS to handle ng-click events and callback functions

Within my web application, there exist two distinct user types: guests and logged users. Regardless of the user type, both are presented with identical content on the main page.

The objective :

Upon a registered user clicking a link, 2 ajax requests ($http) will be made to fetch data from another page and display it in a model.
If the user is a guest, a separate model will prompt them to register.

The link I have created :

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

GuestAction function :

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

    });

}

This approach ensures that if a guest is detected, the execution is halted by returning false. Conversely, for a regular user, the function showOne is executed. To manage consecutively fired asynchronous requests, I opted for the callback method.

An issue arises when showOne() is triggered instantly upon ng-click activation. I attempted passing showOne() as a string and utilizing eval() within GuestAction; however, the parameters were found to be undefined...

Are there any suggestions for resolving this dilemma? I aim to implement a universal procedure that triggers a function exclusively if the user is logged in.

javascript ajax angularjs asynchronous

Answer 1

Answer №1

If you're looking for a cleaner way to handle $http requests in AngularJS, I recommend using services and promises. Check out AngularJS $q documentation for more information.

While using a service for $http requests is not mandatory, it can greatly improve the organization of your controller code.

Here's an example of a service that utilizes promises:

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

    var service = {};

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

    return service;
});

In your controller, you can call the service like this:

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

    $scope.guestAction = function($event, card) {
        myService.guestAction().then(function (result) {
            if (result) {
                alert('Guest spotted!');
            } else {
                alert('User');
                // You can then proceed with showOne
                // If showOne is also asynchronous, consider using another promise
                $scope.showOne($event, card.id);
            }
        }).catch(function (error) {
            console.error('ERROR: ' + error);
        })
    };
});

You may need to make adjustments based on your specific requirements, but using promises allows you to execute code asynchronously and continue once the promise is fulfilled. This approach can help streamline your code structure.

Answer 2

If you're looking for a cleaner way to handle $http requests in AngularJS, I recommend using services and promises. Check out AngularJS $q documentation for more information.

While using a service for $http requests is not mandatory, it can greatly improve the organization of your controller code.

Here's an example of a service that utilizes promises:

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

    var service = {};

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

    return service;
});

In your controller, you can call the service like this:

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

    $scope.guestAction = function($event, card) {
        myService.guestAction().then(function (result) {
            if (result) {
                alert('Guest spotted!');
            } else {
                alert('User');
                // You can then proceed with showOne
                // If showOne is also asynchronous, consider using another promise
                $scope.showOne($event, card.id);
            }
        }).catch(function (error) {
            console.error('ERROR: ' + error);
        })
    };
});

You may need to make adjustments based on your specific requirements, but using promises allows you to execute code asynchronously and continue once the promise is fulfilled. This approach can help streamline your code structure.

Answer 3

Answer №2

Make sure to provide functions as arguments without using the parentheses and supply the parameters separately:

<h3 ng-click="handleEvent($event, card.id, displayOne);">click here</h3>

also,

$scope.handleEvent = function($event, id, callbackFunction) {

    $http.get('/user/is-logged/').success(function(response) {
        console.log("isLogged result : " + response);
        if (response == 1)
        {
            alert('User is logged in!');
            return false;
        }
        else
        {
            alert('Visitor');
            callbackFunction($event, id);
        }

    });

}

Answer 4

Make sure to provide functions as arguments without using the parentheses and supply the parameters separately:

<h3 ng-click="handleEvent($event, card.id, displayOne);">click here</h3>

also,

$scope.handleEvent = function($event, id, callbackFunction) {

    $http.get('/user/is-logged/').success(function(response) {
        console.log("isLogged result : " + response);
        if (response == 1)
        {
            alert('User is logged in!');
            return false;
        }
        else
        {
            alert('Visitor');
            callbackFunction($event, id);
        }

    });

}

Using AngularJS to handle ng-click events and callback functions

Answer №1

Answer №2

Similar questions

Is there a way to remove a function from a constructor in JavaScript?

Select the card if the input spinner value is greater than zero

How can I identify when a CSS transition on a particular element has ended if there are several transitions occurring simultaneously?

Creating Sequelize models with associations

Issue with Electron and Node.js: Application fails to launch due to inability to locate the app within the modules

Callback in React Setstate triggered, leading to a delay in rendering

Troubleshooting issue with AngularJS: Anchor tag with dynamic ng-click not functioning post compilation

What is the most graceful way to manage devise's 401 error response when using AJAX?

Manipulating the .innerHTML property allows for selectively replacing sections

Issues arising from Ionic's functionalities when separated controllers are implemented, resulting in

Triggering the open() function within an Ajax request

Trouble with JavaScript confirm's OK button functionality in Internet Explorer 11

Unable to convert UTF-8 buffer to the specified data format

Is there a way to adjust the font size in Javascript/Html without changing the color?

Issue with React submit button for posting data is not functioning as intended

Discovering common elements in various arrays of objects

Retrieve Chosen Text from Array

Leveraging the power of the Google API within the Dojo module

Use bracket notation to verify if a property is undefined

AngularJS directive is triggering $watch callback functions upon initialization