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 stillAnw, 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 wellHere’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 thisError: [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 thisons.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?