以打字稿AngulaJS不能在指令链接功能访问角服务 [英] AngulaJS with typescript cannot access angular services in directive link function

问题描述

我是pretty在打字稿新的，我想创建的 Angular.js 使用的打字稿类指令编写并希望使用外部角服务指令中的链接函数调用时的 $手表函数接收到的数据。但无论我如何努力，这个关键字总是链接到全球的窗口，我无法访问注射服务。请帮我做这件事。
这里是我的指令：

 模块Portal.MainMenu {
    类MenuScrollDirective实现ng.IDirective {
        静态$注射=$超时，$窗口];        构造函数（私人$超时：ng.ITimeoutService，私人$窗口：ng.IWindowService）{}
        限制=EA;
        范围= {
            扩展为：=，
            tplChanged：=，
            fullView：=
        };
        链接=（$范围：ng.IScope，EL：IJQSlimScroll）=＆GT; {
            VAR设置= {
                位置：左，
                大小：5像素
            };            在里面（）;            功能的init（）{
                $ $范围手表（'扩张'，（CUR，preV）=方式＆gt; {
                    CUR和放大器;＆安培; adjustScroll（）;
                }）;
            }            功能adjustScroll（）{
                VAR winH = $这个// window.innerHeight这 - 是指窗口在这里
                                                   //但我需要访问服务                这$超时（（）=＆GT; {
                    //需要访问这里报
                }）; //同样在这里'这'是全球性的
            }
    }    angular.module（'portal.mainMenu'）
           .directive（'menuScroll'，（$超时：ng.ITimeoutService，$窗口：ng.IWindowService）=＆GT; {
                返回新MenuScrollDirective（$超时，$窗口）;
            }）;
}
 

解决方案

指令链接功能具有控制器/ CTRL作为第三个参数和属性/ ATTRS作为第四个参数。

样本链接功能将是这个样子：

 链接=（$范围：angular.IScope，EL：angular.IAugmentedJQuery，CTRL：功能，ATTRS：angular.IAttributes）。
 

您可以使用控制器参考来调用控制器功能，并从那里直接调用，您需要的操作角度的服务功能。

问候

阿贾伊

I am pretty new in typescript and I am trying to create Angular.js directive written using typescript class and want to use external angular services in directive link function, invoked when $watch function received data. But no matter how I try, this keyword always link to the global window and I cannot access injected services. Help me please to do it. Here is my directive:

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

解决方案

Directive link function has controller/ctrl as third parameter and attributes/attrs as fourth parameter.

Sample link function will look something like this:

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

You can use controller reference to invoke the controller function and from there directly invoke the angular services function which you need for manipulation.

Regards

Ajay

这篇关于以打字稿AngulaJS不能在指令链接功能访问角服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！