कोणीय घटक आउटपुट बाध्यकारी फ़ंक्शन

Question

से नियंत्रक स्कोप तक नहीं पहुंच सकता है मैं डैशबोर्ड component से अपने घर नियंत्रक दायरे तक पहुंचने का प्रयास कर रहा हूं लेकिन यह अपरिभाषित है।

मैंने एक दूसरे दृष्टिकोण की भी कोशिश की लेकिन फिर मेरा फ़ंक्शन वैरिएबल अपरिभाषित है।

मैं टाइपप्रति

प्रथम कार्य के साथ कोणीय 1.5 उपयोग कर रहा हूँ:

होम नियंत्रक HTML:

<div class="home-container"> 
    <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged"> 
    </dashboard-component> 
</div> 

होम नियंत्रक js:

namespace app.dashboard { 
    'use strict'; 

    class HomeController { 
     static $inject:Array<string> = ['$window']; 

     constructor(private $window:ng.IWindowService) { 

     } 

     private onTileTypeChanged(tile:ITile) { 
      console.log(tile); // DEFINED AND WORKING 
      console.log(this); // NOT DEFINED 
     } 
    } 

    angular 
     .module('app.dashboard') 
     .controller('HomeController', HomeController); 
} 

डैशबोर्ड नियंत्रक js:

angular.module('app.dashboard') 
    .component('dashboardComponent', { 
     templateUrl: 'app/dashboard/directives/dashboard-container.html', 
     controller: DashboardComponent, 
     controllerAs: 'DashboardCtrl', 
     bindings: { 
      onTileTypeChanged: "&" 
     } 
    }); 

this.onTileTypeChanged()(tile); 

द्वितीय कार्य:

होम नियंत्रक HTML:

<div class="home-container"> 
    <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged()"> 
    </dashboard-component> 
</div> 

डैशबोर्ड नियंत्रक js:

this.onTileTypeChanged(tile); 

और यहाँ मैंविपरीत हो रहा है:

private onTileTypeChanged(tile:ITile) { 
    console.log(tile); // NOT DEFINED 
    console.log(this); // DEFINED AND WORKING 
} 

Answer 1

आप अभिव्यक्ति बाध्यकारी का उपयोग कर रहे हैं।

angular.module('app.dashboard') 
    .component('dashboardComponent', { 
     templateUrl: 'app/dashboard/directives/dashboard-container.html', 
     controller: DashboardComponent, 
     controllerAs: 'DashboardCtrl', 
     bindings: { 
      onTileChange: "&" 
     } 
    })t 

एक माता पिता के नियंत्रक करने के लिए एक घटक से इवेंट डेटा संवाद करने के लिए:

इन्स्तांत dashboard-component साथ:

this.onTileChange({$tile: tile}); 

:

<dashboard-component on-tile-change="HomeCtrl.onTileChange($tile)"> 
</dashboard-component> 

घटक नियंत्रक में स्थानीय लोगों के साथ समारोह आह्वान

इंजेक्शन वाले स्थानीय लोगों के लिए सम्मेलन उन्हें बुद्धिमान करना है एच $ उपसर्ग उन्हें मूल दायरे पर चर से अलग करने के लिए उपसर्ग।

डॉक्स से:

• & या &attr - माता-पिता गुंजाइश के संदर्भ में एक अभिव्यक्ति निष्पादित करने के लिए एक तरह से प्रदान करता है। यदि कोई attr नाम निर्दिष्ट नहीं किया गया है तो विशेषता नाम स्थानीय नाम के समान माना जाता है। <my-component my-attr="count = count + value"> और अलग-अलग स्कोप परिभाषा scope: { localFn:'&myAttr' } दी गई, अलग-अलग दायरे की संपत्ति localFncount = count + value अभिव्यक्ति के लिए फ़ंक्शन रैपर को इंगित करेगी। अक्सर माता-पिता के दायरे में अभिव्यक्ति के माध्यम से अलग-अलग दायरे से डेटा पास करना वांछनीय है। यह अभिव्यक्ति रैपर एफएन में स्थानीय परिवर्तनीय नामों और मानों का नक्शा पास करके किया जा सकता है।उदाहरण के लिए, यदि अभिव्यक्ति increment($amount) है तो हम localFn को localFn({$amount: 22}) पर कॉल करके राशि मान निर्दिष्ट कर सकते हैं।

- AngularJS Comprehensive Directive API Reference