कोणीयजेएस टाइपस्क्रिप्ट निर्देश लिंक फ़ंक्शन

Question

मैं टाइपस्क्रिप्ट का उपयोग करके एक कोणीय जेएस निर्देश बनाने की कोशिश कर रहा हूं। मेरे निर्देश के लिए 'ngModel' की आवश्यकता है और मैं अपने निर्देश में इंजेक्शन वाली कस्टम सेवा का भी उपयोग कर रहा हूं। मेरी मुख्य समस्या यह है कि मेरी सेवा का उपयोग मेरे लिंक फ़ंक्शन के अंदर नहीं किया जा सकता है।

module app.directives { 

    export var directiveName: string = "theDirective"; 

    angular.module("myApp").directive(directiveName, 
      (myFactory: app.services.MyFactory) => 
      { 
       return new MyDirective(myFactory); 
      }); 

    export interface IMyDirectiveScope extends ng.IScope { 
     ngModel: ng.INgModelController; 
    } 

    export class MyDirective implements ng.IDirective { 

     restrict = "A"; 
     require = "ngModel"; 
     scope = { 
      ngModel:'=' 
     } 

     constructor(private myFactory: app.services.MyFactory) { 

     } 


     link(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) { 
      //this is window here 

      elem.bind('blur', (evt: JQueryEventObject) => { 
       //keyword this is also window here, so yeah bummer indeed 
       validate(); 
      }); 

      function validate() { 
       //I need to use my factory here, but I can seem to get it. 
       //this is always window and I'm kinda stuck here 
      } 
     } 
    } 
} 

मैं इस विषय पर कुछ और अधिक उन्नत सामान को खोजने के लिए प्रतीत नहीं कर सकते हैं:

यहाँ मैं क्या हासिल करने की कोशिश कर रहा हूँ का एक उदाहरण है। मुझे लगता है कि सभी उदाहरण सेवाओं या जटिल लिंक फ़ंक्शन का उपयोग नहीं करते हैं। कृपया इस प्रश्न का उत्तर किसी प्रकार के उदाहरण के साथ दें। यह चाल है जो आपको लगता है।

अद्यतन: तथ्य यह है कि मेरे लिंक फ़ंक्शन के अंदर 'यह' विंडो है और 'MyDirective' मुझे बहुत समझ में नहीं आता है। कोई विचार क्यों होगा?

Answer 1

कक्षाएं नियंत्रकों और निर्देशक नियंत्रकों के लिए बहुत अच्छी काम करती हैं लेकिन मुझे नहीं लगता कि मैं संपूर्ण निर्देश के लिए एक का उपयोग करूंगा। आप इस तरह से कुछ कर सकते हैं एक वर्ग के बिना::

export class MyDirective implements ng.IDirective { 

    public link; 

    restrict = "A"; 
    require = "ngModel"; 
    scope = { 
     ngModel:'=' 
    } 

    constructor(private myFactory: app.services.MyFactory) { 
     this.link = this.unboundLink.bind(this); 
    } 


    unboundLink(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) { 
     //Now you should be able to access myFactory 
     this.myFactory.doSomething(); 

     elem.bind('blur', (evt: JQueryEventObject) => { 
      //keyword this is also window here, so yeah bummer indeed 
      validate(); 
     }); 

     function validate() { 
      //I need to use my factory here, but I can seem to get it. 
      //this is always window and I'm kinda stuck here 
     } 
    } 
} 

संपादित करें: लेकिन अगर आप आप करना चाहते हैं शायद कुछ इस तरह कर दिया था

angular.module("myApp").directive("theDirective", 
    function(myFactory: app.services.MyFactory) { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      scope: {'ngModel': '='}, 
      link: function(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) { 
       //You can access myFactory like this. 
       myFactory.doSomething(); 
      } 
     } 
    } 
); 

Answer 2

वर्गों का उपयोग करना और ng.IDirective से विरासत टाइपस्क्रिप्ट के साथ जाने का तरीका है।

टाइपप्रति ECMAScript 6. से वसा तीर समारोह () => लिए समर्थन शामिल है यह एक आशुलिपि सिंटैक्स भी तरह से this कीवर्ड काम करता है परिवर्तन:

class MyDirective implements ng.IDirective { 
    restrict = 'A'; 
    require = 'ngModel'; 
    scope = { 
     ngModel: '=' 
    } 

    constructor(private myFactory: app.services.MyFactory) { 
    } 

    link = (scope: IMyDirectiveScope, elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) => { 
     console.log(this); // this points to MyDirective instance instead of Window 

     elem.bind('blur', (evt: JQueryEventObject) => { 
      console.log(this); // this points to MyDirective instance instead of Window 
      this.validate(); 
     }); 
    } 

    validate() { 
     console.log(this); // this points to MyDirective instance instead of Window 
    } 


    static factory(): ng.IDirectiveFactory { 
     var directive = (myFactory: app.services.MyFactory) => new MyDirective(myFactory); 
     directive.$inject = ['myFactory']; 
     return directive; 
    } 
} 

app.directive('mydirective', MyDirective.factory()); 

तुम भी पुराने फैशन पर भरोसा कर सकते var self = this; पैटर्न:

class MyDirective implements ng.IDirective { 
    restrict = 'A'; 
    require = 'ngModel'; 
    scope = { 
     ngModel: '=' 
    } 

    constructor(private myFactory: app.services.MyFactory) { 
    } 

    link = (scope: IMyDirectiveScope, elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) => { 
     console.log(this); // this points to MyDirective instance instead of Window 

     var self = this; 

     function validate() { 
      console.log(self); // self points to MyDirective instance 
     } 

     elem.bind('blur', function(evt: JQueryEventObject) { 
      console.log(self); // self points to MyDirective instance 
      validate(); 
     }); 
    } 
} 

संबंधित जवाब: https://stackoverflow.com/a/29223535/990356