Question

当我点击Open Full Screen按钮时，我正在使用 Angular Fullscreen 插件让我的内容全屏显示。

但我希望在全屏显示时隐藏此按钮并显示另一个按钮Submit Form。

全屏关闭时Submit Form隐藏，Open Full Screen重新出现。我不知道如何使这个功能。任何帮助将不胜感激。

[我尝试在我的 Plunker 上添加角度全屏的示例，但不幸的是，由于某种原因，它还没有在那里运行。 ]

HTML

<div fullscreen="isFullscreen">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non neque eget sem luctus rutrum. Vivamus vestibulum fermentum dolor, ac rhoncus nisi blandit ac. Vestibulum in ante quis eros cursus congue id in lorem. Maecenas ut odio vitae nibh fringilla sagittis. Mauris pharetra porttitor lorem et dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae vehicula elit, sit amet cursus tellus. Integer eu tellus mauris. Fusce eros leo, gravida et tellus consectetur, pharetra rutrum nisi. In dictum nunc ac eros dapibus convallis. Vestibulum vehicula venenatis justo, id malesuada mi tempor et. Nam mattis commodo rhoncus. Cras sed nunc consectetur elit auctor accumsan. Vestibulum congue lectus eu enim fringilla, ac cursus enim blandit. In sagittis fringilla elementum. Cras adipiscing sem nulla, sed congue erat blandit eget. Donec vitae viverra urna, nec lobortis ipsum. Aenean dignissim lorem id viverra porttitor. Nullam eleifend elementum arcu. Nulla porta tortor in risus imperdiet, eu imperdiet risus faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum cursus egestas massa ac dictum. Aenean vel nisi nec dolor tempus commodo vel sit amet elit. Vestibulum venenatis, odio eget aliquam interdum, diam ipsum semper massa, sit amet dictum nisi mi in mauris. Fusce a adipiscing libero. Phasellus viverra, arcu a commodo cursus, justo tellus suscipit tortor, quis aliquet urna turpis vel massa. Pellentesque dignissim ipsum quam, malesuada malesuada sem tempus eget. Vestibulum ac eros ante.</div>
    <hr>
    <button class="btn btn-default" ng-click="toggleFullScreen()">Open Full Screen</button>
    <button class="btn btn-danger" >Submit Form</button>

JS

 $scope.isFullscreen = false;

    $scope.toggleFullScreen = function() {
        $scope.isFullscreen = !$scope.isFullscreen;
    }

Answer 1

它之所以不是因为预览不在单独的窗口中试试这段代码

http://plnkr.co/edit/Xg8d2pZlOTGreCi65SND?p=preview

**更新

要在单独的窗口中打开结果，请单击结果区域右上角的全屏图标

所以，我在提交输入中添加了ng-if="!fullscreen"

<button class="btn btn-danger" ng-show="!isFullscreen" >Submit Form</button>

Answer 2

您是否尝试在按钮上添加ng-if？以下代码应该适合您

 <button class="btn btn-default" ng-if="!isFullScreen" ng-click="toggleFullScreen()">Open Full Screen</button>
 <button class="btn btn-danger" ng-if="isFullScreen" >Submit Form</button>

Answer 3

<button ng-show="!isFullScreen" class="btn btn-default" ng-click="toggleFullScreen()">Open Full Screen</button>
<button ng-show="isFullScreen" class="btn btn-danger" ng-class="toggleFullScreen()">Submit Form</button>

使用ng-show。将ng-click函数调用放在两个按钮中。

确保您的拼写在您的功能中保持一致。检查你的camelCase！

Plunker Demo

Answer 4

我创建了一个名为angular-screenfull的不同全屏库，它提供了对库screenfull的角度方式绑定，这是最常用的全屏库。

因此，如何在不同的浏览器中处理全屏，而不是重新发明轮子，我专注于如何使它成为角度方式。

从这个例子中你可以看到你甚至不需要编写代码（但如果你愿意，你也可以）。您只能使用指令。

<div ngsf-fullscreen>
  <p>This is a fullscreen element</p>
  <a ngsf-toggle-fullscreen show-if-fullscreen-enabled>
      <i show-if-fullscreen=false>Icon for enter fullscreen</i>
      <i show-if-fullscreen=true>Icon for exit fullscreen</i>
  </a>
</div>

您可以将任何可全屏显示的元素设置得相当简单，只有在设备可以处理时才添加按钮，如果可以，您可以显示A按钮进入或退出全屏。

作为奖励方，它甚至不使用观察者！

全屏打开时显示/隐藏按钮

4 个答案: