onsen popover：url没有变量(onsen popover : url not taking variable)

不确定这是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); }; });

它以这种方式被调用

这不起作用。如果我改变ons.createPopover（$ scope.param，{parentScope：$ scope}）。那么（function（popover）by

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

然后它工作，但显然显示whatever.html始终

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

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

谢谢您的帮助！

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

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 !

最满意答案

您的代码中有两个错误：

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

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

在这里，您可以找到一个有效的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);
    };
  }); 
  
 
 
 希望能帮助到你！ 
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!

更多推荐

onsen popover：url没有变量(onsen popover : url not taking variable)

最满意答案

发布评论取消回复

最近发表

热门文章

标签列表