Function is not recognized by another function in angularjs

Question

During loading of the partial Html with controller, my function named $scope.actionViewVisitors() is recognized and runs without errors. But whenever I use it inside another function on the same controller, it gives me an error: TypeError: $scope.actionViewVisitors is not a function. Please see my code below:

angular.module("Visitor.controller", [])

// ============== Controllers
.controller("viewVisitorController", function ($scope, $rootScope, $http, viewVisitorService, viewAccountService, DTOptionsBuilder) {
    $scope.visitorList = null;

    $scope.viewAccountDetail = null;
    $scope.avatar = null;

    $scope.visitorDetail = null;

    $scope.visitorBtn = "Create";

    $scope.actionViewAccount = function () {
        $scope.actionViewAccount = viewAccountService.serviceViewAccount()
        .then(function (response) {
            $scope.viewAccountDetail = response.data.account;
            $scope.avatar = "../../avatars/" + response.data.account.AccountId + ".jpg";
        })
    }

    $scope.dtOptions = DTOptionsBuilder.newOptions()
        .withDisplayLength(10)
        .withOption('bLengthChange', false);

    // THIS ONE IS NOT RECOGNIZED    
    $scope.actionViewVisitors = function () {
        $scope.actionViewVisitors = viewVisitorService.serviceViewVisitors()
            .then(function (response) {
            debugger;
                $scope.visitorList = response.data.visitorList;
            });
    }

    // I DON'T GET ANY ERROR HERE
    $scope.actionViewVisitors();
    $scope.actionViewAccount();

    $scope.createVisitor = function () {
        $scope.statusMessage = null;
        if ($scope.visitorBtn == "Create") {
            $scope.createVisitor = viewVisitorService.serviceCreateVisitor($scope.visitorDetail)
                .then(function (response) {
                    if (response.data.response == '1') {
                        bootbox.alert({
                            message: "Successfully created a new visitor.",
                            size: 'small',
                            classname: 'bb-alternate-modal'
                        });
                    } else if (response.data.response == '0') {
                        bootbox.alert({
                            message: "Failed in creting visitor.",
                            size: 'small',
                            classname: 'bb-alternate-modal'
                        });
                    }
                });
            debugger;
            $scope.visitorDetail = undefined;
            // I GET THE ERROR WHEN I CALL THIS METHOD
            $scope.actionViewVisitors();
        }
    }
})

// ============== Factories
.factory("viewVisitorService", ["$http", function ($http) {
    var fac = {};

    fac.serviceViewVisitors = function () {
        return $http({
            url: '/Visitor/ViewVisitors',
            method: 'get'
        });
    }

    fac.serviceCreateVisitor = function(visitor) {
        return $http({
            url: '/Visitor/CreateVisitor',
            data: { visitor: visitor },
            method: 'post'
        });
    }

    return fac;
}])

Satpal · Accepted Answer · 2018-01-18 09:19:43Z

4

You are overwriting the function with Promise in the following line, thus the error is correct

$scope.actionViewVisitors = function () {
    $scope.actionViewVisitors = viewVisitorService.serviceViewVisitors() 
        .then(function (response) {
           $scope.visitorList = response.data.visitorList;
        });
}

Remove $scope.actionViewVisitors =

$scope.actionViewVisitors = function () {
    viewVisitorService.serviceViewVisitors() 
        .then(function (response) {
           $scope.visitorList = response.data.visitorList;
        });
}

answered Jan 18, 2018 at 9:19

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jim Wright · Accepted Answer · 2018-01-18 09:20:13Z

2

On the first call to the function you are changing it from a function to a Promise. Maybe you want to be returning the result instead?

$scope.actionViewVisitors = function () {
    return viewVisitorService.serviceViewVisitors()
        .then(function (response) {
        debugger;
            $scope.visitorList = response.data.visitorList;
        });
}

answered Jan 18, 2018 at 9:20

Jim Wright

6,0681 gold badge18 silver badges35 bronze badges

Collectives™ on Stack Overflow

Function is not recognized by another function in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related