我可能只是试图一次结合太多“新的”概念,但我正在尝试使用 TypeScript 类编写自定义 Angular 指令。目前,我并不想做任何非常有用的事情,只是做一个 POC。
我有一个如下所示的 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());
}
它在 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 = {}));
我的角度模块看起来像(我什至不知道是否需要这样做):
angular.module('app',['appStepper'])
我尝试在我看来使用它:
<div app-stepper></div>
并得到这些错误:
Uncaught Error: [$injector:nomod]
Uncaught Error: [$injector:modulerr]
为什么我的没有app
知道我的指令吗?
尽管这不是完全相同的问题,但这个答案包含了我正在尝试做的事情的示例:如何使用 TypeScript 定义我的控制器?
我按照它引用的 Plnkr 中的示例进行操作并发现成功:http://plnkr.co/edit/3XORgParE2v9d0OVg515?p=preview
我的最终 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()]);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)