Monaca Onsen UI Discord Chat Github Repo

What's wrong? My ons-popover doesn't show up [AngularJS]

  • So, I tried to make an offline app using Onsen UI and AngularJS
    I know AngularJs is already stop developed, but because the application that I want to make is offline base, so I choose to use it still

    Anw, back to the topic, I have already tried to follow the instruction of this ons-popover documentation, but it’s not working
    Because I create an application that has few pages, so I use a template tag for every page and the popover as well

    Here’s my HTML script looks like

    <template id="main_page.html">
      <ons-page ng-controller="appCtrl">
          My App
        <div class="main">
          <ons-button id="target_button">Button</ons-button>
    <template id="popover.html">
        This popover is defined as a template.

    And here is the script inside of my controller

    app.controller("appCtrl", function($scope){
      ons.createElement("popover.html", {parentScope: $scope, append: true})
       .then(function(popover){"#target_button"); // the target where I want the popover to show at

    As you can see on my controller above, I use the ons-button id which is button_target as a target where I want the popover to show at
    And the error that I got just like this

    Error: [Onsen UI] Invalid target type or undefined
        at vi.throw (onsenui.min.js:2:62668)
        at HTMLElement.value (onsenui.min.js:2:236643)
        at t.<computed> [as show] (angular-onsenui.min.js:4:43505)
        at ctrl.js:93:11

    It’s said that the target is undefined
    So I tried to add and change a few lines just like this

    ons.createElement("popover.html", {parentScope: $scope, append: true})
         var target = document.getElementById("button_target");"target"); // the target where I want the popover to show at

    But nothing changed, is there something that I missed?