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">
        <ons-toolbar>
          My App
        </ons-toolbar>
    
        <div class="main">
          <ons-button id="target_button">Button</ons-button>
        </div>
      </ons-page>
    </template>
    
    <template id="popover.html">
      <ons-popover>
        This popover is defined as a template.
      </ons-popover>
    </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){
         popover.show("#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})
       .then(function(popover){
         var target = document.getElementById("button_target");
         popover.show("target"); // the target where I want the popover to show at
       })
    

    But nothing changed, is there something that I missed?