Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/442.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 全屏显示时显示/隐藏按钮_Javascript_Angularjs - Fatal编程技术网

Javascript 全屏显示时显示/隐藏按钮

Javascript 全屏显示时显示/隐藏按钮,javascript,angularjs,Javascript,Angularjs,当我点击打开全屏按钮时,我正在使用插件使我的内容进入全屏 但我想在全屏显示时隐藏此按钮,并显示另一个按钮submitform 当全屏关闭时,提交表单将隐藏,并且打开全屏再次出现。 我不知道如何使这个功能。任何帮助都将不胜感激 [我试图在我的上添加角度全屏的示例,但不幸的是,出于某种原因,它也没有在那里运行。] HTML <div fullscreen="isFullscreen">Lorem ipsum dolor sit amet, consectetur adipiscing e

当我点击
打开全屏
按钮时,我正在使用插件使我的内容进入全屏

但我想在全屏显示时隐藏此按钮,并显示另一个按钮
submitform

当全屏关闭时,
提交表单
将隐藏,并且
打开全屏
再次出现。 我不知道如何使这个功能。任何帮助都将不胜感激

[我试图在我的上添加角度全屏的示例,但不幸的是,出于某种原因,它也没有在那里运行。]

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>

您是否尝试在按钮上添加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>
全屏打开
提交表格
全屏打开
提交表格
使用ng show。将ng click函数调用放在两个按钮中

确保函数中的拼写一致。检查你的箱子


之所以没有,是因为预览不在单独的窗口中 试试这个代码

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

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

因此,我在提交输入中添加了
ng if=“!fullscreen”

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

我创建了一个不同的全屏库,名为,它提供了到库的角度方式绑定,这是最常用的全屏库

因此,我不是重新发明如何在不同浏览器中处理全屏,而是专门研究如何使其具有角度感

从这个例子中,您可以看到您甚至不需要编写代码(但如果您愿意,您可以这样做)。您只能使用指令

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

这是一个全屏元素

进入全屏的图标 退出全屏的图标
您可以使任何元素都可以很容易地全屏显示,并且只有在设备能够处理的情况下才能添加一个按钮,如果可以,您可以显示一个按钮来进入或退出全屏显示


作为奖励,它甚至不使用观察者

谢谢你的回答。这是完美的您的解决方案向我展示了另一种完成输出的完美方式,并且效果非常好。谢谢
<button class="btn btn-danger" ng-show="!isFullscreen" >Submit Form</button>
<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>