Getting JavaScript error on asynchronous postback scope function

Question

I am getting the following error reported on angular.min.js

0x800a1391 - JavaScript runtime error: 'Error' is undefined

with the following code:

Javascipt:

function Sucess() 
{
    //close
}

function Save() 
{
    var e = document.getElementById('FormDiv');
    scope = angular.element(e).scope();
    scope.Apply(Sucess)
}

My Angular scope function:

function RolesCtrl($scope, $http, $location) 
{
    $scope.Apply = function (CallBackSucess) {

    var userId = getQSP('uid', decode(document.URL));
    $http({
    method: 'POST', url: 'MultiRole.aspx/Apply',
    data: {}
    }).
    success(function (data, status, headers, config) {
        // this callback will be called asynchronously
        CallBackSucess();
        $scope.f = data.d;
        }).
    error(function (data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    $scope.name = 'error';
    })
    }
}

Everything seems to be working fine until CallBackSucess() call is made which throws the error:

0x800a1391 - JavaScript runtime error: 'Error' is undefined

Answer 1

The CallBackSucess argument is passed to the .Apply() method. It is not passed to the .success() method - they are chained methods with separate scopes. Thus, in the .success() callback function, CallbackSucess() is not defined when you try to call it and thus you get an error.

Also, do you really mean to spell Sucess incorrectly?

FYI, I had to format your code like this in order to see what was actually going on:

function RolesCtrl($scope, $http, $location) {
    $scope.Apply = function (CallBackSucess) {
        var userId = getQSP('uid', decode(document.URL));
        $http({
            method: 'POST', 
            url: 'MultiRole.aspx/Apply',
            data: {}
        }).success(function (data, status, headers, config) {
            // this callback will be called asynchronously
            CallBackSucess();
            $scope.f = data.d;
        }).error(function (data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            $scope.name = 'error';
        })
    }
}