Angularjs 带有typescript的AngulaJS无法访问指令链接函数中的AngulaJS服务

Angularjs 带有typescript的AngulaJS无法访问指令链接函数中的AngulaJS服务,angularjs,typescript,this,angularjs-service,angularjs-watch,Angularjs,Typescript,This,Angularjs Service,Angularjs Watch,我对typescript非常陌生,我正在尝试创建使用typescript类编写的Angular.js指令,并希望在指令link函数中使用外部Angular服务,该函数在$watch函数接收数据时调用。但无论我如何尝试,这个关键字总是链接到全局窗口,我无法访问注入的服务。请帮我做这件事。 这是我的指示: module Portal.MainMenu { class MenuScrollDirective implements ng.IDirective { static $

我对typescript非常陌生,我正在尝试创建使用typescript类编写的Angular.js指令,并希望在指令link函数中使用外部Angular服务,该函数在$watch函数接收数据时调用。但无论我如何尝试,这个关键字总是链接到全局窗口,我无法访问注入的服务。请帮我做这件事。 这是我的指示:

module Portal.MainMenu {
    class MenuScrollDirective implements ng.IDirective {
        static $inject = ["$timeout", "$window"];

        constructor(private $timeout: ng.ITimeoutService, private $window: ng.IWindowService) { } 
        restrict = "EA";
        scope = {
            expanded: "=",
            tplChanged: "=",
            fullView: "="
        };
        link = ($scope: ng.IScope, el: IJQSlimScroll) => {
            var settings = {
                position: 'left',
                size: '5px'
            };

            init();

            function init() {
                $scope.$watch('expanded',(cur, prev) => {
                    cur && adjustScroll();
                });
            }

            function adjustScroll() {
                var winH = this.$window.innerHeight //this - refers to Window here 
                                                   //but I need to access service

                this.$timeout(() => {
                    //need access to el here
                }); //same here 'this' is global 
            }
    }

    angular.module('portal.mainMenu')
           .directive('menuScroll', ($timeout: ng.ITimeoutService, $window: ng.IWindowService) => {
                return new MenuScrollDirective($timeout, $window);
            });
}

我不习惯打字,但我觉得这不像惯用的打字。你可能想要这样的东西:

class MenuScrollDirective implements ng.IDirective {
    static $inject = ["$timeout", "$window"];

    constructor(private $timeout: ng.ITimeoutService, private $window: ng.IWindowService) { 
        this.restrict = "EA";
        this.scope = {
            expanded: "=",
            tplChanged: "=",
            fullView: "="
        };
    } 

    link($scope: ng.IScope, el: IJQSlimScroll) {
        $scope.$watch('expanded', (cur, prev) => {
            cur && this.adjustScroll();
        });
    }

    private adjustScroll() {
        var winH = this.$window.innerHeight;
        this.$timeout(() => {}); 
    }
}
link = ($scope: angular.IScope, el: angular.IAugmentedJQuery, ctrl: Function, attrs: angular.IAttributes).

指令链接函数的第三个参数是controller/ctrl,第四个参数是attributes/attrs

示例链接函数如下所示:

class MenuScrollDirective implements ng.IDirective {
    static $inject = ["$timeout", "$window"];

    constructor(private $timeout: ng.ITimeoutService, private $window: ng.IWindowService) { 
        this.restrict = "EA";
        this.scope = {
            expanded: "=",
            tplChanged: "=",
            fullView: "="
        };
    } 

    link($scope: ng.IScope, el: IJQSlimScroll) {
        $scope.$watch('expanded', (cur, prev) => {
            cur && this.adjustScroll();
        });
    }

    private adjustScroll() {
        var winH = this.$window.innerHeight;
        this.$timeout(() => {}); 
    }
}
link = ($scope: angular.IScope, el: angular.IAugmentedJQuery, ctrl: Function, attrs: angular.IAttributes).
您可以使用控制器引用来调用控制器函数,并从中直接调用操作所需的angular services函数

问候


Ajay

可能吧,但是我在link函数中使用el:IJQSlimScroll进行了很多DOM操作,在这种情况下我应该怎么做?以某种方式传递元素作为对adjustScroll函数的引用?是的,对我来说这听起来是最干净的事情。