单击使用角度js单击全屏div

Question

每当用户点击该div时，我只需要创建一个div全屏。我知道这可以通过javascript和jquery来完成。但我想知道是否有任何纯粹的角度js方法。任何有关这方面的建议都将受到赞赏

Answer 1

您可以使用像这样的全屏指令：

https://github.com/hrajchert/angular-screenfull

https://github.com/fabiobiondi/angular-fullscreen

Answer 2

制作div全屏是（应该）关于css，所以你可以通过角度来改变你的div的css类：

HTML

<div ng-class="{fullScreenDiv: isFullScreen}">...</div>
<div ng-click="makeFullScreen()"></div>

JS

$scope.isFullScreen = false;
$scope.makeFullScreen = function(){
    $scope.isFullScreen = true;
};

fullScreenDiv是css类，isFullScreen是控制器范围中的变量。更改isFullScreen变量以启用/禁用全屏。

ng-class="{fullScreenDiv: isFullScreen}"的meaining是isFullScreen表达式的计算结果为true，然后将fullScreenDiv css类应用于元素。

Answer 3

一种方法是使用ngClass根据布尔范围属性应用全屏类。并单击时使用ngClick切换范围属性...

<div ng-click="isFullScreen = !isFullScreen" 
     ng-class="{fullscreen: isFullScreen}">click me</div>

Fiddle