AngularJSコントローラが正しく関数を呼び出せない

Question

私はAngular 1.6を使用していますが、私が渡した関数をコントローラに呼び出すときに問題があります。以下の例では、<image-selector>に関数を渡していますhomepage.htmlがあります。 <image-selector>は、画像が変更されたときに親を更新する渡された関数を呼び出すようにします。 HomepageCtrlは、それ自身の関数updateState()を呼び出してデータを処理します。

のonImageChange()が定義されていないため、HomepageCtrlはupdateState()を呼び出すことができません。 ImageSelectorCtrlがonImageChange()を呼び出しているので、この問題が発生していると思われます。thisは、HomepageCtrlの代わりにImageSelectorCtrlを指しています。

ImageSelectorCtrlはonImageChange()を呼び出すことができるので、updateState()を呼び出すようにこの問題を解決する方法は不思議です。

// homepage.js 
import homepageHtml from './homepage.html'; 
class HomepageCtrl { 
    constructor() { 
    } 

    onImageChange(newImage) { 
     this.updateState({newImage: processImage(newImage)}); // console error: cannot read property of 'updateState' of undefined 
    } 

    updateState(options) { 
     console.log('Updating state...'); 
    } 
} 
export const Homepage = { 
    template: homepageHtml, 
    controller: HomepageCtrl 
}; 


// homepage.html 
<div class="homepage"> 
    <image-selector on-change="$ctrl.onImageChange"></image-selector> 
</div> 


// imageSelector.js 
import imageSelectorHtml from './image-selector.html'; 
class ImageSelectorCtrl { 
    constructor() { 
     this.imageUrl; 
    } 

    onChange() { 
     this.onChange()(imageUrl); 
    } 
} 
export const ImageSelector = { 
    bindings: { 
     onChange: '&' 
    }, 
    template: imageSelectorHtml, 
    controller: ImageSelectorCtrl 
}; 

Answer 1

別のコンテキストで実行されているので、これをクラスメソッドにバインドしてください。

class HomepageCtrl { 
    constructor() { 
     this.onImageChange = this.onImageChange.bind(this) 
     this.updateState = this.updateState.bind(this) 
    } 

    onImageChange(newImage) { 
     this.updateState({newImage: processImage(newImage)}); // console error: cannot read property of 'updateState' of undefined 
    } 

    updateState(options) { 
     console.log('Updating state...'); 
    } 
}