使用 Typescript 发出 angular 指令

Question

您好，我正在尝试使用 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>

我遇到的问题如下：属性 'dialogStyle' 不存在于类型 '{ show: string; }'.

属性 'width' 在类型 'IAttributes' 上不存在。

'typeof ModalDialogDirective' 类型的参数不能分配给 'any[]' 类型的参数。

Answer 1

您的 link 函数应该接受扩展类型的范围。声明一个扩展 ng.IScope 的接口以提供您的参数，然后在 link 函数中使用该接口：

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 和打字稿，我建议您查看 SideWaffle：http://sidewaffle.com/

使用 Typescript 发出 angular 指令

Issue angular directives using Typescript

javascript

angularjs

typescript

angularjs-directive