Question

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

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}）。那么（函数（popover）由

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

然后它可以工作，但显然会一直显示whatever.html

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

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

感谢您的帮助！

Answer 1

您的代码中有两个错误：

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

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

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没有变量

1 个答案: