page object - promise handling - error "Cannot read property 'submit' of undefined" - jasmine

Question

I am trying to click on the submit button in a login screen, only if the button text shows "Next". In the last line below, I am getting the error - "Cannot read property 'submit' of undefined". I think I am not resolving promise properly in the page object. I'd appreciate it if someone could help suggest a solution..
//Login Page object
var LoginPage = function () {
this.email = element(by.model('loginCtrl.username'));
this.password = element(by.model('loginCtrl.password'));
this.submit = element(by.css('[ng-click="loginCtrl.login()"]'));
this.get = function(){
browser.get('/#/login');
};
this.login = function () {
this.email.clear();
this.email.sendKeys(browser.params.login.user);
this.submit.getText().then(function (text) {
if (text == "Next") {
//***ERROR below.
//***Cannot read property 'submit' of undefined
this.submit.click();
}
});

Answer 1

In this case, when inside the then() function, the this is not pointing to your page object anymore. A common approach is to create a reference to the page object in the outer scope:
this.login = function () {
this.email.clear();
this.email.sendKeys(browser.params.login.user);
var self = this;
this.submit.getText().then(function (text) {
if (text == "Next") {
self.submit.click();
}
});
}