Embedding view from controller and accessing owner component (https://stackoverflow.com/q/63595938/5846045)

<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_horizon"
      data-sap-ui-async="true"
      data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-compatversion="edge"
      data-sap-ui-excludejquerycompat="true"
      data-sap-ui-resourceroots='{ "demo": "./" }'
      data-sap-ui-xx-componentpreload="off"
      data-sap-ui-xx-waitfortheme="init"
    ></script>
  </head>
  <body id="content" class="sapUiBody">
    <div style="height: 100%;"
      data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], function (UIComponent) {
  "use strict";

  return UIComponent.extend("demo.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
      manifest: "json",
    },

  });
});

{
  "_version": "1.54.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "demo",
    "type": "application",
    "title": "App Title",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "dataSources": {}
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.108",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {},
        "sap.ui.unified": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "css": []
    },
    "models": {
      "": {
        "type": "sap.ui.model.json.JSONModel"
      }
    },
    "rootView": {
      "viewName": "demo.view.App",
      "id": "rootView",
      "type": "XML",
      "async": true
    }
  }
}

<mvc:View controllerName="demo.controller.App"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true"
  height="100%"
>
  <App autoFocus="false">
    <Page id="page" showHeader="false" class="sapUiResponsiveContentPadding">
      <Button id="button"
        busyIndicatorDelay="0"
        text="Load Nested View"
        type="Emphasized"
        press=".onLoadButtonPress"
      />
    </Page>
  </App>
</mvc:View>

<mvc:View controllerName="demo.controller.Nested" 
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
>
  <Title titleStyle="H1" text="Loaded nested view" />
</mvc:View>

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/core/mvc/XMLView",
], function (Controller, XMLView) {
  "use strict";

  return Controller.extend("demo.controller.App", {
    onLoadButtonPress: async function () {
      this.byId("button").setBusy(true)
      const fn = () => XMLView.create({ viewName: "demo.view.Nested" });
      const oView = await this.getOwnerComponent().runAsOwner(fn);
      this.byId("page").addContent(oView);
      this.byId("button").setBusy(false);
    },

  });
});

sap.ui.define([
  "sap/ui/core/mvc/Controller",
], function (Controller) {
  "use strict";

  return Controller.extend("demo.controller.Nested", {
    onInit: function () {
      const component = this.getOwnerComponent();
      alert(`Accessing model from nested view...: ${
        component && component.getModel()
          ? "Works! 👍"
          : "Doesn't work."
        }`);
    },


  });
});