onsen popover : url not taking variable

Question

Not sure this is an issue with onsen-ui or me being a newbie with angularjs... I've got a menu with 2 different popover. I wanted to use the same controler since they are similar. The only difference is the button that call it and the page used for the popover menu. So I have something like this

app.controller('PopoverController', function($scope) {
        $scope.popurl = function(url) {
            $scope.param = url; 
        };
        ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) {
            $scope.popover = popover;

        });
        $scope.show = function(e) {
            $scope.popover.show(e);
        };
        $scope.destroy = function(e) {
            $scope.popover.destroy(e);
        };
    });

And it gets called this way

<div class="right" ng-controller="PopoverController">
    <ons-toolbar-button id="android-share" ng-click="popover.show($event);  popurl('popover_share.html')">
        <ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
    </ons-toolbar-button>
    <ons-toolbar-button id="android-more" ng-click="popover.show($event); popurl('popover.html')">
        <ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
    </ons-toolbar-button>
</div>

This is not working. if I change ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) by

ons.createPopover('whatever.html',{parentScope: $scope}).then(function(popover) {

Then it works but obviously display whatever.html all the time

So I guess my first question is why is it working when I hardcode the URL and doesn't when I use a variable ?

The second question is : Is there a simpler way to pass my argument to my controler ?

Thank you for your help !

Answer 1

There are two mistakes in your code:

• you are trying to show the popover before it has been created.
• when you click the toolbar-button you are calling two functions in sequence, without considering that maybe the second function will finish its execution before the first one. This will give an inconsistent result (the popover will be displayed before the new URL will be initialized).

You can solve your issues by creating the popover inside $scope.popurl(), after the URL has been initialized. You can also show the popover after it has been created. Don't forget to destroy the popover after you close it, as any button click will create a new instance of the popover.

HERE you can find a working CodePen example and here is the code:

HTML

<div class="right" ng-controller="PopoverController">
  <ons-toolbar-button id="android-share" ng-click="popurl('popover_share.html', $event)">
    <ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
  </ons-toolbar-button>
  <ons-toolbar-button id="android-more" ng-click="popurl('popover.html', $event)">
    <ons-icon icon="ion-android-more-vertical" fixed-width="false"></ons-icon>
  </ons-toolbar-button>
</div>

<ons-template id="popover_share.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>This is "popover_share" popover!</p>
    </div>
  </ons-popover>
</ons-template>

<ons-template id="popover.html">
  <ons-popover direction="up down" cancelable>
    <div style="text-align: center; opacity: 0.5;">
      <p>This is "popover" popover!</p>
    </div>
  </ons-popover>
</ons-template>

JS

ons.bootstrap()
  .controller('PopoverController', function($scope) {

    $scope.popurl = function(url, e) {
      $scope.param = url;

      ons.createPopover($scope.param, {
        parentScope: $scope
      }).then(function(popover) {
        $scope.popover = popover;
        $scope.show(e);
      });
    };

    $scope.show = function(e) {
      $scope.popover.show(e);
    };
    $scope.destroy = function(e) {
      $scope.popover.destroy(e);
    };
  });

Hope it helps!