角度JSの$の解析は、私はtypescriptですを使用してディレクティブを書いた

Question

動作しません。ここに私の指示があります。

'use strict'; 

    module App.Directives { 

    interface IPageModal extends ng.IDirective { 
    } 

    interface IPageModalScope extends ng.IScope { 

    } 

    class PageModal implements IPageModal { 
     static directiveId: string = 'pageModal'; 
     restrict: string = "A"; 

     constructor(private $parse: ng.IParseService) { 

     } 

     link = (scope: IPageModalScope, element, attrs) => { 

      element.click((event) => { 
       event.preventDefault(); 

       var options = { 
        backdrop: 'static', 
        keyboard: false 
       }; 

       event.openModal = function() { 
        $('#' + attrs['targetModal']).modal(options); 
       }; 
       event.showModal = function() { 
        $('#' + attrs['targetModal']).modal('show'); 
       }; 
       event.closeModal = function() { 
        $('#' + attrs['targetModal']).modal('hide'); 
       }; 
       var fn = this.$parse(attrs['pageModal']); 
       fn(scope, { $event: event }); 
      }); 
     } 
    } 

    //References angular app 
    app.directive(PageModal.directiveId, ['$parse', $parse => new PageModal($parse)]); 
} 

HTML

<button class="btn blue-grey-900" target-modal="emplpyeeViewModal" page-modal="vm.addEmployee($event)"> 
    <i class="icon-plus m-b-xs"></i> 
</button> 

この行は動作しませんコントローラー

addEmployee($event) { 
    $event.openModal(); 
}; 

で使用中の

使用。 var fn = this.$parse(attrs['pageModal']);。私は何が間違っているのか理解できません。エラー

あるこの。$の解析は未定義です。 とサービスのそれはかなり些細だ2回

Answer 1

と呼ばれる：function openmodal(event) {は、独自に定義しているので、あなたのthisは、あなたのclass'esスコープではありません。

例えば、クラスレベルで機能を宣言またはその代わりに矢印関数を使用

link = (scope: IPageModalScope, element, attrs) => { 
    element.click((event) => { 
     event.preventDefault(); 

     var options = { 
      backdrop: 'static', 
      keyboard: false 
     }; 

     event.openModal = function() { 
      $('#' + attrs['targetModal']).modal(options); 
     }; 
     event.showModal = function() { 
      $('#' + attrs['targetModal']).modal('show'); 
     }; 
     event.closeModal = function() { 
      $('#' + attrs['targetModal']).modal('hide'); 
     }; 
     var fn = this.$parse(attrs['pageModal']);//does not work here 
     fn(scope, { $event: event }); 
    }); 
}