Issue угловые директивы с использованием машинопись

Question

Привет Я пытаюсь реализовать следующие угловую директивы, используя машинопись классы,

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

Ваша функция связи должна принимать объем расширенного типа. Объявите интерфейс, который расширяет 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; 
     }; 
    } 

Если вы хотите, чтобы получить некоторые шаблоны, чтобы начать работу с угловым и машинописи, я предлагаю вам проверить SideWaffle : http://sidewaffle.com/