给定这段代码:
module movieApp {
export interface IHomeControllerScope extends ng.IScope {
moviesToDownload: string[];
active: string;
deleteMovieFromDownloadList(movie: any);
markMovieAsDownloaded(movie: any);
}
export class HomeController {
public static $inject = [
'$scope',
'$location',
'MovieService'
];
constructor(private $scope: IHomeControllerScope, private $location: ng.ILocationService, private MovieService) {
this.$scope.$on('$locationChangeSuccess', (event) => {
this.setActiveUrlPart();
});
MovieService.getMoviesToDownload().then(response => {
this.$scope.moviesToDownload = response;
});
}
private setActiveUrlPart() {
var parts = this.$location.path().split('/');
this.$scope.active = parts[1];
}
public get moviesToDownload() {
return this.$scope.moviesToDownload;
}
public markMovieAsDownloaded(movie: any) {
movie.Downloaded = true;
}
public deleteMovieFromDownloadList(movie: any) {
this.MovieService.deleteMovieFromDownloadList(movie).then(() => {
debugger;
this.$scope.moviesToDownload = _.without(this.$scope.moviesToDownload, movie);
});
}
}
}
app.controller("HomeController", movieApp.HomeController);
一切正常,但在deleteMovieFromDownloadList
line的方法中this.$scope.moviesToDownload = _.without(this.$scope.moviesToDownload, movie);
,this
引用的是窗口对象,而不是我期望的实际对象。
生成的JavaScript如下所示:
var movieApp;
(function (movieApp) {
var HomeController = (function () {
function HomeController($scope, $location, MovieService) {
var _this = this;
this.$scope = $scope;
this.$location = $location;
this.MovieService = MovieService;
this.$scope.$on('$locationChangeSuccess', function (event) {
_this.setActiveUrlPart();
});
MovieService.getMoviesToDownload().then(function (response) {
_this.$scope.moviesToDownload = response;
});
}
HomeController.prototype.setActiveUrlPart = function () {
var parts = this.$location.path().split('/');
this.$scope.active = parts[1];
};
Object.defineProperty(HomeController.prototype, "moviesToDownload", {
get: function () {
return this.$scope.moviesToDownload;
},
enumerable: true,
configurable: true
});
HomeController.prototype.markMovieAsDownloaded = function (movie) {
movie.Downloaded = true;
};
HomeController.prototype.deleteMovieFromDownloadList = function (movie) {
var _this = this;
this.MovieService.deleteMovieFromDownloadList(movie).then(function () {
debugger;
_this.$scope.moviesToDownload = _.without(_this.$scope.moviesToDownload, movie);
});
};
HomeController.$inject = [
'$scope',
'$location',
'MovieService'
];
return HomeController;
})();
movieApp.HomeController = HomeController;
})(movieApp || (movieApp = {}));
app.controller("HomeController", movieApp.HomeController);
//# sourceMappingURL=HomeController.js.map
如您所见,在生成的JS中,特定方法使用_this。看起来不错吧?
有人可以向我解释会发生什么情况以及如何解决此问题吗?
编辑:
我将此与Angular结合使用:
<body data-ng-app="movieApp" data-ng-controller="HomeController as homeCtrl">
<div class="col-sm-1">
<i class="fa fa-trash-o" data-ng-click="homeCtrl.deleteMovieFromDownloadList(m)" title="Verwijder uit lijst"></i>
</div>
</body>
编辑II:尝试所有建议,然后重新设置我在此处发布的原始代码后,一切正常!我不知道该怎么做,但我想它与Chrome / VS 2013有关。无论如何,感谢那些尝试帮助我的人。
函数“ deleteMovie ...”可能绑定到按钮或其他UI元素。在这种情况下,此功能在窗口上下文中执行。要解决此问题,您应该在控制器的构造函数中定义函数主体:
constructor(private $scope: IHomeControllerScope, private $location: ng.ILocationService, private MovieService) {
// other initialization code...
this.deleteMovieFromDownloadList = (movie: any) => {
this.MovieService.deleteMovieFromDownloadList(movie).then(() => {
debugger;
this.$scope.moviesToDownload = _.without(this.$scope.moviesToDownload, movie);
});
}
}
并在控制器类中声明适当的功能:
deleteMovieFromDownloadList: (movie: any) => void;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句