Issue chỉ thị góc sử dụng nguyên cảo

Question

Hi Tôi cố gắng để thực hiện sau chỉ thị góc sử dụng các lớp nguyên cảo,

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' 
}; 
}); 

Đây là mẫu:

<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> 

Đây là cách tiếp cận của tôi,

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; 
      }; 
     } 
} 

Điều này làm thế nào nó được gọi trong html:

<modal-dialog show='modalShown' width='400px' height='60%'> 
    <p>Modal Content Goes here<p> 
</modal-dialog> 

Tôi gặp sự cố với: Thuộc tính 'dialogStyle' không tồn tại trên loại '{show: string; } '.

Thuộc tính 'chiều rộng' không tồn tại trên loại 'IAttributes'.

Đối số của loại 'typeof ModalDialogDirective' không thể gán cho tham số thuộc loại 'any []'.

Answer 1

Chức năng liên kết của bạn phải chấp nhận phạm vi của loại mở rộng. Khai báo một giao diện kéo dài ng.IScope để cung cấp các thông số của bạn, sau đó sử dụng giao diện mà trong chức năng liên kết của bạn:

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; 
     }; 
    } 

Nếu bạn muốn nhận được một số mẫu để bắt đầu với góc và nguyên cảo, tôi đề nghị bạn nên kiểm tra SideWaffle : http://sidewaffle.com/