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?