typescript 打字稿角度指令控制器功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29667173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Typescript angular directive controller function
提问by siemprepe
I have an issue writing angular directives in typescript. I want to write my directives using typescript classes. Everything works fine except the controller function.
我在打字稿中编写角度指令时遇到问题。我想使用打字稿类编写我的指令。除了控制器功能外，一切正常。
class myDirective implements ng.IDirective{
public priority :number = 999;
public require :String[] = ["ngModel","myDirective"];
public controller(){
var test = 1;
return {
reset : function(){
test = 0;
}
}
}
public link($scope: ng.IScope, elm: JQuery, attr: ng.IAttributes, ctrlArray: any){
var controller;
controller = ctrlArray[1];
controller.reset();
}
static factory(): ng.IDirectiveFactory{
var directive = () => new myDirective();
return directive;
}
}
export = myDirective;
But when running this in angular I get a "undefined is not a function" when controller.reset() is called inside the link function. When I inspect controller i just get prototype Object, there is no reset function defined.
但是当以 angular 运行时，当在链接函数内调用 controller.reset() 时，我得到一个“未定义不是函数”。当我检查控制器时，我只是得到原型对象，没有定义重置功能。
When I write my directive like this, it works.
当我像这样编写指令时，它会起作用。
function myDirective(): ng.IDirective{
return {
priority: 999,
require: ["ngModel","myDirective"],
controller: function(){
var test = 1;
this.reset = function(){
test = 0;
}
},
link: function($scope: ng.IScope, elm: JQuery, attr: ng.IAttributes, ctrlArray: any){
var controller;
controller = ctrlArray[1];
controller.reset();
}
}
}
export = myDirective;
The difference is in the way the controller function is written. In the typescript class I use.
不同之处在于控制器函数的编写方式。在我使用的打字稿类中。
return {
reset : function(){
test = 0;
}
}
in the function way I use
以我使用的功能方式
this.reset = function(){
test = 0;
}
Unfortunately, typescript doesn't let me use the second way inside a typescript class. IS there anything I am missing, or am I approaching this entirely from the wrong angle?
不幸的是，打字稿不允许我在打字稿类中使用第二种方式。有什么我遗漏的，还是我完全从错误的角度接近这个？
回答by basarat
This is the directive design that we've been using :
这是我们一直在使用的指令设计：
export class FooDirectiveController {
static $inject = ['$element', '$scope'];
constructor(public $element: JQuery, public $scope: FooDirectiveScope) {
$scope.vm = this;
// Any Jquery access goes here. Use $element
// Setup any $watch on $scope that you need
}
}
export interface FooDirectiveScope extends ng.IScope {
bar: string;
// Local design only
vm: FooDirectiveController;
}
dustApp.directives.directive('foo', function (): ng.IDirective {
return {
restrict: 'E',
scope: {
// NOTE : see documentation in type information
bar: '='
},
templateUrl: 'fooDirective.html',
controller: FooDirectiveController
};
});
This way you controller is strongly typedand the directive definition object is dumb (and possibly angular 2 compatible).
通过这种方式，您的控制器是强类型的，并且指令定义对象是愚蠢的（并且可能与 angular 2 兼容）。
