Angular js $ parse funktioniert nicht

Question

Ich habe eine Direktive mit Typoskript geschrieben. Hier ist meine Direktive unten.

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

Verwendung in HTML

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

Einsatz im Controller-

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

Diese Zeile funktioniert nicht. var fn = this.$parse(attrs['pageModal']);. Ich kann nicht verstehen, was falsch ist. Der Fehler ist

dies. $ Parse ist undefiniert. and Service wird zweimal

genannt

Answer 1

Es ist ziemlich trivial: Ihre this ist Umfang nicht Ihre class'es weil die function openmodal(event) { seine eigene definiert.

Deklarieren Sie die Funktion auf Klassenebene oder verwenden Sie stattdessen die Pfeilfunktion, z.

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