onsen popover : url 不接受变量

Question

不确定这是 onsen-ui 的问题还是我是 angularjs 的新手... 我有一个带有 2 个不同弹出窗口的菜单。我想使用相同的控制器，因为它们很相似。唯一的区别是调用它的按钮和用于弹出菜单的页面。所以我有这样的东西

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);
        };
    });

它被这样调用

<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>

这是行不通的。如果我改变 ons.createPopover($scope.param,{parentScope: $scope}).then(function(popover) by

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

然后它工作但显然一直显示 whatever.html

所以我想我的第一个问题是为什么它在我硬编码 URL 时有效，而在我使用变量时却无效？

第二个问题是：是否有更简单的方法将我的参数传递给我的控制器？

感谢您的帮助！

Answer 1

你的代码有两个错误：

您正试图在弹出窗口创建之前显示它。
当您单击 toolbar-button 时，您正在依次调用两个函数，而没有考虑第二个函数可能会在第一个函数之前完成执行。这将给出不一致的结果（弹出窗口将在新 URL 初始化之前显示）。

在初始化 URL 之后，您可以通过在 $scope.popurl() 中创建弹出窗口来解决您的问题。您还可以在创建弹出窗口后显示它。不要忘记在关闭弹出窗口后销毁它，因为单击任何按钮都会创建一个新的弹出窗口实例。

HERE 您可以找到一个有效的 CodePen 示例，这是代码：

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);
    };
  });

希望对您有所帮助！

onsen popover : url 不接受变量

onsen popover : url not taking variable

angularjs

onsen-ui