[英]Issue angular directives using Typescript
嗨,我正在尝试使用Typescript类实现以下angular指令,
angular.module('mota.main', []).directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
},
replace: true, // Replace with the template below
transclude: true, // we want to insert custom content inside the directive
link: function(scope, element, attrs) {
scope.dialogStyle = {};
if (attrs.width)
scope.dialogStyle.width = attrs.width;
if (attrs.height)
scope.dialogStyle.height = attrs.height;
scope.hideModal = function() {
scope.show = false;
};
},
templateUrl = 'src/app/selection.ts'
};
});
这是模板:
<div class='ng-modal' ng-show='show'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng- modal-dialog-content' ng-transclude></div>
</div>
</div>
这是我的方法,
export class ModalDialogDirective implements ng.IDirective {
public restrict = "E";
public scope = {show: '='};
public require = ['ngModel'];
public transclude = true;
public templateUrl = 'src/app/selection.ts';
public replace = true;
public link(scope: ng.IScope, element: JQuery, attrs: ng.IAttributes)
{
scope.dialogStyle = {};
if (attrs.width){
scope.dialogStyle.width = attrs.width;
}
if (attrs.height){
scope.dialogStyle.height = attrs.height;
}
scope.hideModal = function() {
scope.show = false;
};
}
}
这是他在html中的调用方式:
<modal-dialog show='modalShown' width='400px' height='60%'>
<p>Modal Content Goes here<p>
</modal-dialog>
我遇到以下问题:类型'{show:string;类型不存在属性'dialogStyle'。 }'。
属性“ width”在类型“ IAttributes”上不存在。
类型'typeof ModalDialogDirective'的参数不能分配给类型'any []'的参数。
您的链接函数应接受扩展类型的范围。 声明一个扩展ng.IScope的接口以提供您的参数,然后在链接函数中使用该接口:
interface ImyScope extends ng.IScope{
dialogStyle:any;
hideModal:()=>void;
show:boolean;
}
public link(scope: ImyScope, element: JQuery, attrs: ng.IAttributes)
{
scope.dialogStyle:any = {};
if (attrs.width){
scope.dialogStyle.width = attrs.width;
}
if (attrs.height){
scope.dialogStyle.height = attrs.height;
}
scope.hideModal = function() {
scope.show = false;
};
}
如果您希望获得一些模板来开始使用angular和Typescript,建议您检查SideWaffle: http ://sidewaffle.com/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.