Angularjs 带有typescript的AngulaJS无法访问指令链接函数中的AngulaJS服务
我对typescript非常陌生,我正在尝试创建使用typescript类编写的Angular.js指令,并希望在指令link函数中使用外部Angular服务,该函数在$watch函数接收数据时调用。但无论我如何尝试,这个关键字总是链接到全局窗口,我无法访问注入的服务。请帮我做这件事。 这是我的指示: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 $
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函数的引用?是的,对我来说这听起来是最干净的事情。