[英]Writing an Angular directive with a TypeScript class
I may just be attempting to combine too many "new-to-me" concepts at once, but I am trying to write a custom Angular directive using a TypeScript class. 我可能只是试图一次组合太多“新手入门”概念,但是我试图使用TypeScript类编写自定义Angular指令。 At the moment, I'm not trying to do anything terribly useful, just a POC.
目前,我并没有做任何非常有用的事情,只是POC。
I have a TypeScript file that looks like this: 我有一个看起来像这样的TypeScript文件:
module App {
'use strict';
export class appStepper {
public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void;
public template:string = '<div>0</div><button>-</button><button>+</button>';
public scope = {};
public restrict:string = 'EA';
constructor(){ }
public static Factory(){
var directive = () =>
{ return new appStepper(); };
return directive;
}
}
angular.module('app').directive('appStepper', App.appStepper.Factory());
}
It compiles to this in JavaScript: 它在JavaScript中编译为:
(function(App) {
'use strict';
var appStepper = (function() {
function appStepper() {
this.template = '<div>0</div><button>-</button><button>+</button>';
this.scope = {};
this.restrict = 'EA';
}
appStepper.Factory = function() {
var directive = function() {
return new appStepper();
};
return directive;
};
return appStepper;
})();
App.appStepper = appStepper;
angular.module('app').directive('appStepper', App.appStepper.Factory());
})(App || (App = {}));
My angular module looks like (I don't even know if I need to do this): 我的角度模块看起来像(我什至不知道是否需要这样做):
angular.module('app',['appStepper'])
And I attempt to use it in my view: 我尝试在我看来使用它:
<div app-stepper></div>
And get these errors: 并得到以下错误:
Uncaught Error: [$injector:nomod]
Uncaught Error: [$injector:modulerr]
Why doesn't my app
know about my directive? 为什么我的
app
知道我的指令?
Though it is not quite the same question, this answer included an example of what I'm attempting to do: How can I define my controller using TypeScript? 尽管问题不完全相同,但此答案包含了我要尝试执行的操作的一个示例: 如何使用TypeScript定义控制器?
I followed the example in the Plnkr it referenced and found success: http://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview 我按照它引用的Plnkr中的示例进行操作,并发现成功: http ://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview
My final TypeScript directive looks like: 我最后的TypeScript指令如下所示:
module App {
'use strict';
export class appStepper implements angular.IDirective {
public link:(scope:angular.IScope, element: angular.IAugmentedJQuery, attrs: angular.IAttributes) => void;
public template:string = '<div>0</div><button>-</button><button>+</button>';
public scope = {};
public restrict:string = 'EA';
constructor(){ }
}
angular.module('app').directive('appStepper', [() => new App.appStepper()]);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.