ngToast returns undefined when used inside a service

65 Views Asked by At

I am trying to create a simple notification system using ngToast through this documentation - http://tamerayd.in/ngToast/. Everything seems to work correctly when using it inside my module(login-flow) but if I'm trying to pass it to a service ($notify) it returns undefined in the console. Thing is that the first time I used this service as a test, it worked. Once I customized it for my needs, the problem appeared. Note that I'm not that good with angularjs and I'm learning it while working on this project. If you notice anything odd or not a "best practice", please, do tell (this part might be a bit offtopic so ignore it if you feel like it).

I've already tried removing any code that felt redundant and also changing parameters orders but the result is the same. Note that this works when using ngToast as a dependency inside the "login-flow" controller but as long as I pass it to the "$notify" service, the problem starts to occur.

app module: index-globals.js

const licentaApp = angular.module("licenta-app", ["ngToast"]);
licentaApp.run(($rootScope, $location) => {
    $rootScope.$on('$locationChangeSuccess', function() {
        return $location.$$hash;
    });
}).controller("app", ($scope, $rootScope, $location) => {
    $scope.hash = "";
    $rootScope.$on('$locationChangeSuccess', function() {
        $scope.hash = $location.$$hash;
    });
});

index-login-controller.js - controller which calls the $notify service

licentaApp.controller("login-flow", ($scope, $http, $notify,ngToast) => {
    // $scope.username = "[email protected]";
    // $scope.password = "pass";
    $scope.isLoading = false;
    $scope.login = () => {
        $scope.isLoading = true;
        $scope.loading_class = "spinner-border text-light";
        $scope.login_text = "";
        $http({
            url: "attempt-login",
            method: "GET",
            params: {
                username: $scope.email,
                password: $scope.password
            },
            headers: {
                "Content-Type": "text/plain"
            }
        }).then(function(result) {
            console.log(ngToast)
            if (result.data !== "no_result") {
                $notify.displayNotification("Bine ați venit!",ngToast);
                location.hash = "profil";
            } else {
                $notify.displayNotification("Datele de logare nu au fost introduse corect.", ngToast,isError);
            }
            $scope.isLoading = false;
        }).catch(err => {
            $notify.displayNotification("A aparut o eroare: " + err);
            $scope.isLoading = false;
        });
    }
    $scope.forgotPass = () => {
        location.hash = "uitat_parola";
    }
});

licentaApp.controller("forgot-pass-flow", ($scope, $rootScope, $location, $http, $timeout, $notify) => {
    function verifyCNP(cnp) {
        let sum = 0;
        controlNumber = "279146358279";
        if (cnp.length !== 13) {
            $notify.displayNotification($rootScope, $timeout, "Unul dintre codurile numerice este incorect.", true);
            return false;
        } else {
            for (let i = 0; i < 12; i++) {
                sum += parseInt(cnp[i]) * parseInt(controlNumber[i]);
            }
            let controlDigit = sum % 11 === 10 ? 1 : sum % 11;
            if (controlDigit !== parseInt(cnp[12])) {
                $notify.displayNotification($rootScope, $timeout, "Unul dintre codurile numerice este incorect.", true);
                return false;
            } else {
                return true;
            }
        }
    }
    $scope.isLoading = false;
    $scope.back = () => {
        location.hash = "";
    }

    $scope.reset = () => {
        if ($scope.cnp && $scope.cnp_repeat) {
            if (verifyCNP($scope.cnp) === false || verifyCNP($scope.cnp_repeat) === false) {
                return;
            } else if (!$scope.email || !$scope.email.match(/([A-Z0-9!#$%&'*+-/=?^_`{|}~.])/gi)) {
                $notify.displayNotification($rootScope, $timeout, "Email-ul este incorect.", true);
            } else {
                alert("TEST")
            }
        } else {
            $notify.displayNotification($rootScope, $timeout, "Unul dintre câmpurile de CNP nu a fost completat.", true);
        }
    }
});

$notify.js - notification service


licentaApp
    .service("$notify", function () {
        this.displayNotification = (message, ngToast,isError) => {
             ngToast.create({
                 className : isError ? "danger" : "success",
                 content : message,
                 dismissOnClick : true,
                 animation : "slide",
                timeout : 5000
             });
            // console.log(ngToast)
        }
    });
1

There are 1 best solutions below

0
On

Nvm - it was something really minor. I was actually sending "isError" as a parameter to the notification system instead of assigning it a value. This feels soooo obvious that I actually feel bad about asking question in the first place.