AngularJS 컨트롤러가 제대로 함수를 호출 할 수 없습니다.

Question

각도 1.6을 사용하고 있으며 전달한 함수를 호출하기 위해 컨트롤러를 가져 오는 데 문제가 있습니다. 아래 예제에서 <image-selector>에 함수를 전달하는 homepage.html이 있습니다. <image-selector>에서 전달 된 함수를 호출하여 이미지가 변경되었을 때 부모를 업데이트하려고합니다. HomepageCtrl은 자체 기능 updateState()을 호출하여 데이터를 처리합니다.

onImageChange()의 this.updateState()이 정의되지 않았으므로 HomepageCtrl은 updateState()을 호출하지 못하는 문제가 있습니다. ImageSelectorCtrl이 onImageChange()이므로 this이 대신 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...'); 
    } 
}