Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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?