您好,我正在尝试使用 Typescript 类实现以下 Angular Directive(指令),
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' }'.
类型“IAttributes”上不存在属性“宽度”。
“typeof ModalDialogDirective”类型的参数不能分配给“any[]”类型的参数。
最佳答案
您的链接函数应该接受扩展类型的范围。声明一个扩展 ng.IScope 的接口(interface)以提供您的参数,然后在您的链接函数中使用该接口(interface):
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/
关于javascript - 使用 Typescript 发出 Angular Directive(指令),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29219770/