使用AngularJS中的TypeScript在控制器中注入服务不起作用

时间:2017-03-24 15:43:50

标签: angularjs typescript

我将尝试使用TypeScript和angular JS在我的控制器中注入一个服务。但不行。我的代码中有什么问题?这是我的服务问题?我的服务中的所有功能都无法访问,当我尝试调试时,所有功能都是未定义的。有我的代码。

控制器

module Controller {

    import Service = Services;

    export class UserCtrl implements Interface.IUserCtrl {

        private user: Model.User;
        private users: Model.User[];
        private userService: Service.UserService;

        static $inject = ['$scope','UserService'];

        constructor(userService: Service.UserService) {
            this.userService = userService;
        }

        public getUsers = () => {
            this.users = this.userService.findAll();
            return this.users;
        }
        public getUser = (name: string) => {
            return this.userService.find(name);
        }
    }

    app.controller('UserCtrl', Controller.UserCtrl);
}

服务

module Services {

    export class UserService implements Interface.IUserService {

        private users: Model.User[];

        constructor() {
            this.users = [new Model.User("Giunta", "Lucas", 26), new Model.User("Rousselet", "Céline", 26)];
        }

        public create = (user: Model.User) => {

        }
        public edit = (user: Model.User) => {

        }
        public remove = (user: Model.User) => {

        }
        public find = (name: string) => {
            for (let u of this.users) {
                if (u.name == name) {
                    return u;
                }
            }
        }
        public findAll = () => {
            return this.users;
        }

    }

    app.service('UserService', Services.UserService);
}

2 个答案:

答案 0 :(得分:2)

这是因为您同时请求$ scope和UserService,但构造函数只接受后者。

要修复它,你应该让构造函数中的属性与$ inject中的属性相同。

999-999-9999

答案 1 :(得分:0)

正如@toskv所提到的,你还需要将$scope注入到构造函数中。

依赖关系是有序的,所以对于你的代码现在的方式,注入器认为你注入的UserService是$scope,这不是你想要的。