在温泉中隐藏弹出窗口 ui

Question

因此，在有人跳到我面前大喊已经有解决方案之前，我很抱歉，但它对我不起作用。我看了一下并尝试了下面问题中提出的两个选项，但没有成功。

我真的不明白为什么我的代码与示例几乎相同。我在页面上使用了滑动菜单，但仅此而已。

这是我的 index.html

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>

<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<script>

    var app = ons.bootstrap('propertyDeal', ['onsen']);
    app.controller('AppController', function($scope, myService) {
        ons.createPopover('popover.html',{parentScope: $scope}).then(function(popover) {
            $scope.popover = popover;
            myService.setPopover($scope.popover);
        });
    })
    app.controller('HydePController', function($scope, myService) {
        $scope.destroyPopover = function() {
            $scope.popover = myService.getPopover();    
            $scope.popover.hide();
        }
    });

    app.service("myService", function(){
        var sharedPopover

        var setPopover = function(pop){
            sharedPopover = pop;
        };

        var getPopover = function(){
            return sharedPopover;
        };

        return {
            setPopover: setPopover,
            getPopover: getPopover,
        };
    });
</script>
</head>
<body>
<ons-sliding-menu main-page="initial.html" menu-page="menu.html" max-slide-distance="260px" type="overlay" var="menu" side="left" close-on-tap>
</ons-sliding-menu>
<ons-template id="popover.html">
    <ons-popover direction="down" cancelable>
            <ons-list ng-controller="HydePController">
                <ons-list-item modifier="tappable" ng-click="menu.setMainPage('save.html', {closeMenu: true}); popover.hide()">
                    <ons-icon icon="fa-cloud"></ons-icon>
                    Save property
                </ons-list-item>
                <ons-list-item modifier="tappable" ng-click="hydepopover()">
                    <ons-icon icon="fa-home"></ons-icon>
                    View portfolio
                </ons-list-item>
            </ons-list>
    </ons-popover>

</ons-template>

</body>

和initial.html

<ons-navigator>
<ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <ons-icon class="icon" icon="ion-social-usd"></ons-icon>&nbsp;Initial investment
      </div>
      <div class="right">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
            <ons-toolbar-button ng-controller="AppController" id="android-more" ng-click="popover.show($event);">
              <ons-icon icon="ion-android-more" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
      </div>
    </ons-toolbar>

    <div style="text-align: center">
        <h2>Initial investment</h2>

        <ul class="list">
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Purchase price">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Market value">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Stamp duty">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Sourcing fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Legal fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" placeholder="Other">
            </li>
        </ul>
    </div>

        </ul>
    </div>

</ons-page>
</ons-navigator>

如上所述，我尝试了两种解决方案，但没有成功。我不明白为什么。我还有一个滑动菜单，在菜单外单击时不会关闭。这可能相关吗？

感谢您的帮助！阿诺

Answer 1

除了一个小错误外，您提供的代码很好。您不应该在 ons-toolbar-button 上添加控制器，因为它会破坏按钮。

只需在父元素上添加控制器（在initial.html中），来自：

<div class="right">
   <ons-toolbar-button ng-click="menu.toggleMenu()">
      <ons-icon icon="ion-android-share" fixed-width="false"></ons-icon>
   </ons-toolbar-button>
   <ons-toolbar-button ng-controller="AppController" id="android-more" ng-click="popover.show($event);">
      <ons-icon icon="ion-android-more" fixed-width="false"></ons-icon>
   </ons-toolbar-button>
</div>

对此：

<div class="right" ng-controller="AppController" >
   <ons-toolbar-button ng-click="menu.toggleMenu()">
      <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);">
      <ons-icon icon="ion-android-more" fixed-width="false"></ons-icon>
   </ons-toolbar-button>
</div>

您可以找到一个有效的 CodePen 示例 HERE。

关于 sliding-menu，似乎工作正常。

在温泉中隐藏弹出窗口 ui

Hide popover in onsen ui

popover

angularjs

onsen-ui