在Typescript中编写AngularJS控制器的最佳实践

我对AngularJS和Web开发非常陌生，在C＃和C++方面经验更丰富。因此，我尝试使用Typescript。在Typescript中编写AngularJS控制器的最佳实践

我现在在控制器上工作，并有一些奇怪的行为。当使用类似于下面代码中的登录函数时，会出现问题，即sessionService和userDataService没有在then语句中定义。它可以在那之前和之后访问。

class UserController { 
    scope: UserControllerScope; 
    location: ng.ILocationService; 
    sessionService: SessionService; 
    userDataService: UserDataService; 

    constructor($scope: UserControllerScope, 
       $location: ng.ILocationService, 
       userDataService: UserDataService, 
       sessionService: SessionService){ 
    this.scope = $scope; 
    this.location = $location; 
    this.userDataService = userDataService; 
    this.sessionService = sessionService; 
    } 

    loginUser(username: string, pw: string) { 
    var foundUser; 
    console.log(this.sessionService); 
    console.log(this.userDataService); 
    console.log("Got into LoginUser"); 

    this.userDataService.getUserAsync(username, pw).then(function(foundUserFromDb) { 
     console.log(this.sessionService); 
     console.log(this.userDataService); 
    }); 

    console.log(this.sessionService); 
    console.log(this.userDataService); 
    this.location.path("views/projects.html") 
    } 
}

有没有一种方法需要被注入的定制服务，使他们能够接入无处不在的类或者你有更好的方法来处理服务和控制器的注射？

在此先感谢。

来源

2014-02-18 thomacco

你如何创建控制器？你正在缩小你的JavaScript吗？你如何注册你的服务？也可以不用说'this.scope = $ scope'，而只是将构造函数参数更改为'public $ scope：UserControllerScope'，但这不是导致问题的原因。 – rob

感谢您的评论。安东尼楚的回答让我解决了这个问题。它在当时的情况下直接使用“this”。 – thomacco

this在then()的背景下不是控制器。您必须将this捕获到另一个变量，如self。如果您使用箭头功能打字稿会为你做这个...

loginUser = (username: string, pw: string) => { 
    var foundUser; 
    console.log(this.sessionService); 
    console.log(this.userDataService); 
    console.log("Got into LoginUser"); 

    this.userDataService.getUserAsync(username, pw).then(foundUserFromDb => { 
     console.log(this.sessionService); 
     console.log(this.userDataService); 
    }); 

    console.log(this.sessionService); 
    console.log(this.userDataService); 
    this.location.path("views/projects.html") 
}

编译JavaScript的应该是这个样子......

var _this = this; 
this.loginUser = function (username, pw) { 
    var foundUser; 
    console.log(_this.sessionService); 
    console.log(_this.userDataService); 
    console.log("Got into LoginUser"); 

    _this.userDataService.getUserAsync(username, pw).then(function (foundUserFromDb) { 
     console.log(_this.sessionService); 
     console.log(_this.userDataService); 
    }); 

    console.log(_this.sessionService); 
    console.log(_this.userDataService); 
    _this.location.path("views/projects.html"); 
};

来源

2014-02-18 19:40:52

感谢您的帮助。我必须监督这种情况在当时的背景下发生了变化。现在它完美地工作。 – thomacco

在Typescript中编写AngularJS控制器的最佳实践

回答

相关问题