My small controller is responsible for binding a model to a UI and managing the UI popup using semantic principles (instructs semantic on when to display/hide the popup).
export class MyController implements IController {
popup: any | undefined
onShow(context: any) {
this.popup = $(context)
console.log('this.popup', this.popup)
}
onHide() {
this.popup?.popup('hide')
}
}
After successfully showing the semantic popup, the reference is stored in this.popup. Upon inspecting with console.log(), it confirms that this.popup now retains the reference to the popup for future use. However, upon clicking the button to close the popup and invoking onHide(), this.popup becomes undefined. Despite checking whether a constructor or any Angular lifecycle hooks like onChanges or onDestroy are being triggered through breakpoints, nothing seems to be happening. Why does this.popup become undefined despite being explicitly set earlier?
EDIT: Additional information as per request: We utilize semantic UI, and this is the button that triggers the popup to open, thus calling vm.onShow(). In this context, "context" from the aforementioned controller refers to the button that initiated the click event.
<button class="ui icon basic button" ng-class="{ yellow: !vm.model.allActive }"
ng-click="vm.model.open(attribute.value)"
jq-init-popup-fixed="{ inline: true, position: vm.model.position, on: 'click', onVisible: vm.onShow }">
<i class="icon semantic-icon filter" style="padding-left: 1px;"></i>
This specific button serves as the trigger for closing the popup, activating onHide() and instructing semantic to conceal the popup if the controller doesn't lose its reference.
<div class="ui actions right floated button" ng-click="vm.model.close(); vm.onHide()">
<span translate="POPUP_BTN_OK"></span>
</div>