我使用TypeScript构建我的Angular应用程序。
这是我的路线:
app.config(["$routeProvider", ($routeProvider: ng.route.IRouteProvider) => {
$routeProvider.
when('/Movie/:imdb', {
templateUrl: '/Partials/Movie/Details.html',
controller: 'MovieController',
controllerAs: 'vm',
}).
otherwise({
redirectTo: '/Rent'
});
}]);
这是我的控制器:
module MovieApp {
export interface IMovieControllerScope extends ng.IScope {
movie: Movie;
}
export interface RouteParams extends ng.route.IRouteParamsService {
imdb: string;
}
export class MovieController {
public static $inject = ['$scope', '$routeParams', 'MovieService'];
constructor(
private $scope: IMovieControllerScope,
private $routeParams: RouteParams,
private MovieService: MovieService) {
var imdb = $routeParams.imdb;
MovieService.GetMovieByImdb(imdb).then(response => {
this.$scope.movie = response;
});
}
}
app.controller("MovieController", MovieApp.MovieController);
}
这是我的观点
<div>
Movie title... {{vm.movie.Title}}
</div>
我唯一看到的是“电影片名......”。我无法弄清楚如何完成这项工作。
我尝试删除路线中的controllerAs
行,然后在我的视图中移除vm.
,但仍然没有成功。
我做错了什么以及如何解决这个问题?
编辑:
这就是TypeScript对我的控制器的作用:
var MovieApp;
(function (MovieApp) {
var MovieController = (function () {
function MovieController($scope, $routeParams, MovieService) {
var _this = this;
this.$scope = $scope;
this.$routeParams = $routeParams;
this.MovieService = MovieService;
var imdb = $routeParams.imdb;
MovieService.GetMovieByImdb(imdb).then(function (response) {
_this.$scope.movie = response;
});
}
MovieController.$inject = ['$scope', '$routeParams', 'MovieService'];
return MovieController;
})();
MovieApp.MovieController = MovieController;
app.controller("MovieController", MovieApp.MovieController);
})(MovieApp || (MovieApp = {}));