Question

我正在尝试达到类似于全屏模式功能的功能：使用按钮触发全屏模式，然后使用另一个按钮返回。

主题：

 <div ng-class="{full: !presentationMode}"> 
     <div id="child-div>content</div> //div has 100% height
 </div>

触发器： <button ng-click="present()">Click me!</button>

在控制器中我做：

$scope.present = () => {
            $scope.presentationMode = !$scope.presentationMode;
            var myDiv = angular.element('#container');

            // when $scope.presentationMode is true
            // myDiv.height() is not the height set by the "full" class, but it is always reversed (the previous value) 

            // It !sometimes! work if I use $timeout.
 }

我应该如何处理这种情况？

这是一个小提琴：https://jsfiddle.net/U3pVM/29641/

Answer 1

你有一个语法：

<div ng-class="{full: !presentationMode}">

您应该在''

中输入您的班级名称

<div ng-class="{'full': !presentationMode}">

Answer 2

实际上似乎存在范围摘要周期问题：我试图在应用类之前访问div的高度，这就是为什么我总是得到之前的（高度）值。

解决方法是在$ timeout的函数内获得div的高度，没有延迟，但将invokeApply设置为false（默认为true）。

$timeout(function() {
    console.log(myDiv.height()); //has correct value
}, 0, false);

ng-class何时结束表达式评估并应用该类？

2 个答案: