带有打字稿的AngularJS无法在指令链接功能中访问角度服务答案

【问题标题】：AngulaJS with typescript cannot access angular services in directive link function带有打字稿的AngularJS无法在指令链接功能中访问角度服务
【发布时间】：2016-07-24 11:21:39
【问题描述】：

我是打字稿的新手，我正在尝试创建使用 typescript 类编写的 Angular.js 指令，并希望使用外部角度 services 在指令link函数中，当$watch函数接收到数据时调用。但无论我如何尝试，this 关键字总是链接到全局窗口，我无法访问注入的服务。请帮我做。这是我的指令：

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);
            });
}

【问题讨论】：

标签： angularjs typescript this angularjs-service angularjs-watch

【解决方案1】：

我不习惯 TypeScript 和 Angular 一起使用，但对我来说这看起来不像是惯用的 TypeScript。你可能想要这样的东西：

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(() => {}); 
    }
}

【讨论】：

可能，但是我在链接函数中有很多 el: IJQSlimScroll 的 DOM 操作，在这种情况下我该怎么办？以某种方式传递元素作为对 adjustScroll 函数的引用？
是的，这听起来对我来说是最干净的事情。

【解决方案2】：

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

示例链接函数如下所示：

link = ($scope: angular.IScope, el: angular.IAugmentedJQuery, ctrl: Function, attrs: angular.IAttributes).

您可以使用控制器引用来调用控制器函数，并从那里直接调用您需要进行操作的角度服务函数。

问候

阿杰

【讨论】：