使用 TypeScript 类编写 Angular 指令 [英] Writing an Angular directive with a TypeScript class
问题描述
我可能只是试图一次组合太多新手"概念,但我正在尝试使用 TypeScript 类编写自定义 Angular 指令.目前,我不想做任何非常有用的事情,只是一个 POC.
我有一个像这样的 TypeScript 文件:
module App {'使用严格';导出类 appStepper {公共链接:(范围:angular.IScope,元素:angular.IAugmentedJQuery,属性:angular.IAttributes)=>空白;public template:string = '<div>0</div><button>-</button><button>+</button>';公共范围 = {};公共限制:字符串 = 'EA';构造函数(){}公共静态工厂(){var 指令 = () =>{ 返回新的 appStepper();};返回指令;}}angular.module('app').directive('appStepper', App.appStepper.Factory());}
它在 JavaScript 中编译为:
(function(App) {'使用严格';var appStepper = (function() {函数 appStepper() {this.template = '<div>0</div><button>-</button><button>+</button>';this.scope = {};this.restrict = 'EA';}appStepper.Factory = function() {var 指令 = function() {返回新的 appStepper();};返回指令;};返回 appStepper;})();App.appStepper = appStepper;angular.module('app').directive('appStepper', App.appStepper.Factory());})(App || (App = {}));
我的 angular 模块看起来像(我什至不知道我是否需要这样做):
angular.module('app',['appStepper'])
我尝试在我看来使用它:
并得到这些错误:
未捕获的错误:[$injector:nomod]未捕获的错误:[$injector:modulerr]
为什么我的 app
不知道我的指令?
虽然这不是一个完全相同的问题,但这个答案包含了我正在尝试做的一个例子:如何使用 TypeScript 定义控制器?
我按照它引用的 Plnkr 中的示例进行操作并发现成功:http://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview
我的最终 TypeScript 指令如下所示:
module App {'使用严格';导出类 appStepper 实现 angular.IDirective {公共链接:(范围:angular.IScope,元素:angular.IAugmentedJQuery,属性:angular.IAttributes)=>空白;public template:string = '<div>0</div><button>-</button><button>+</button>';公共范围 = {};公共限制:字符串 = 'EA';构造函数(){}}angular.module('app').directive('appStepper', [() => new App.appStepper()]);}
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. At the moment, I'm not trying to do anything terribly useful, just a POC.
I have a TypeScript file that looks like this:
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:
(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?
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?
I followed the example in the Plnkr it referenced and found success: http://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview
My final TypeScript directive looks like:
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()]);
}
这篇关于使用 TypeScript 类编写 Angular 指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!