CODEWITHSUNDEEP
javascriptangularjs
Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

call prototype method inside callback function of prototype method

i have javascript class and 2 prototype methods 

var proEdit = function(){
    this.client;
    var self = this;
}
/*
    class method to load all the project releted details 
*/
proEdit.prototype.loadProject = function(){
    this.client =  $serviceCall.setClient("getAllByProjectID","project"); // method name and service
    this.client.ifSuccess(function(data){  //sucess        
        self.kk();
    })
    this.client.ifError(function(data){ //falce
        console.log("error loading setting data")
    })
    this.client.projectID($stateParams.projectID); // send projectID as url parameters
    this.client.getReq(); // get request if post then use 'postReq('jsonbody')'
    return this;
}


proEdit.prototype.kk = function(){
    console.log("sass");
}

inside loadProject method, i'm calling an api using callback function to access data and if it is ifSuccess then i want call the kk prototype method. but it gives me this error.

angular.js:12722 TypeError: self.kk is not a function

i try to create new instance to the same class and then call the kk function. then it is working 

  this.client.ifSuccess(function(data){  //sucess  
      var in = new proEdit();   
      in.kk();
  })

is it happening because of the callback? how can i prevent this. Thank you

Upvotes: 1

Views: 1153

Answers (3)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

finally found the answer. as mention in the comment, need to use the bind to pass the this to callback

var proEdit = function(){
    this.client;
    var self = this;
}
/*
    class method to load all the project releted details 
*/
proEdit.prototype.loadProject = function(){
    this.client =  $serviceCall.setClient("getAllByProjectID","project"); // method name and service
    this.client.ifSuccess((function(data){  //sucess
        console.log(data) 
        $scope.project = data.project[0];
        $scope.task = data.task;
        $scope.user = data.user;
        $scope.balance = data.balance[0];
        this.kk();
    }).bind(this))
    this.client.ifError(function(data){ //falce
        console.log("error loading setting data")
    })
    this.client.projectID($stateParams.projectID); // send projectID as url parameters
    this.client.getReq(); // get request if post then use 'postReq('jsonbody')'
    return this;
}


proEdit.prototype.kk = function(){
    console.log("sass");
}

Upvotes: 1

hunter2009
hunter2009

Reputation: 153

you can change ths code like this: 

var proEdit = function(){
    this.client;
    // var self = this;
}
/*
    class method to load all the project releted details 
*/
proEdit.prototype.loadProject = function(){
    var that = this;
    this.client =  $serviceCall.setClient("getAllByProjectID","project"); // method name and service
    this.client.ifSuccess(function(data){  //sucess        
        that.kk();
    })
    this.client.ifError(function(data){ //falce
        console.log("error loading setting data")
    })
    this.client.projectID($stateParams.projectID); // send projectID as url parameters
    this.client.getReq(); // get request if post then use 'postReq('jsonbody')'
    return this;
}


proEdit.prototype.kk = function(){
    console.log("sass");
}

Hope it helps!

Upvotes: 1

Rajesh
Rajesh

Reputation: 24945

As commented, you should use .bind

Sample

window.name = "Bar"
var MyClass = function(name) {
  this.name = name;
}

MyClass.prototype.notify = function() {
  console.log(this.name)
}

var m = new MyClass('Foo');

setTimeout(m.notify, 2000);

setTimeout(m.notify.bind(m), 2000);

Upvotes: 4

Related Questions