Javascript 当监视的变量变为false时，如果不隐藏元素，则为Ng

我试图根据屏幕的宽度和测试变量隐藏一个元素。我遇到了一个edge案例，其中ng if指令没有正确地隐藏元素，尽管值为false。下面是相关的代码片段。控制台日志报告我的元素应该是可见的，但是它没有显示

$scope.setContents = function(contents) {
    $scope.noteContent=contents;
    $scope.noteVisible=true;
    $scope.hideNoteList();
  }

$scope.checkWindowSize = function() {
    if ( $(window).innerWidth() < 768 ) {
      $scope.smallScreen = true;
      console.log("Window size is small");
      $scope.hideNoteList();
    }
    else {
      $scope.smallScreen = false;
      console.log("Window size is not small");
      $scope.hideNoteList();
    }
  }

$scope.hideNoteList = function () {
    if($scope.smallScreen && $scope.noteVisible){
      $scope.noteListVisible= false;
      console.log("Note List Should be Hiding");
    }
    else {
      console.log("Note List Should be Visible");
      $scope.noteListVisible= true;
    }
  }

$(window).load($scope.checkWindowSize);
  $(window).resize($scope.checkWindowSize);

$scope.setContents=函数（内容）{
$scope.noteContent=内容；
$scope.noteVisible=true；
$scope.hideNoteList（）；
}
$scope.checkWindowsSize=函数（）{
if（$（窗口）.innerWidth（）<768）{
$scope.smallScreen=true；
log（“窗口大小很小”）；
$scope.hideNoteList（）；
}
否则{
$scope.smallScreen=false；
console.log（“窗口大小不小”）；
$scope.hideNoteList（）；
}
}
$scope.hideNoteList=函数（）{
如果（$scope.smallScreen&&$scope.noteVisible）{
$scope.noteListVisible=false；
log（“应该隐藏注释列表”）；
}
否则{
console.log（“注释列表应可见”）；
$scope.noteListVisible=true；
}
}
$（window.load（$scope.checkWindowSize）；
$（窗口）。调整大小（$scope.checkWindowSize）；

HTML

<ul class="list-group col-xs-0 col-sm-6 col-md-4 col-lg-3" ng-if="noteListVisible">
<li ng-repeat="note in notes>
  <h2 ng-click="setContents(note.content)"></h2>
</li>

您的问题是jQuery事件是在Angular digest循环之外触发的，因此您需要手动调用
$scope.$apply

$(window).load(jqCheckWindowSize);
$(window).resize(jqCheckWindowSize);

function jqCheckWindowSize() {
  $scope.$apply($scope.checkWindowSize);
}

或以poweruser双线方式：

$(window).load  ($scope.$apply.bind($scope, $scope.checkWindowSize));
$(window).resize($scope.$apply.bind($scope, $scope.checkWindowSize));

或者，您可以直接在
checkWindowSize
中调用
$scope.$apply
，或者使用
$timeout
等包装代码。这里的许多答案已经涵盖了这一点。
是什么触发了
$scope.checkWindowSize
？忘记添加这两行。它的Jquery的.resize方法证实了它的有效性。我为得到帮助而欣喜若狂，我知道一定少了些什么！酷：）但是，如果你的应用程序变大了，请注意在每个窗口调整大小事件中使用
$scope.$apply
可能会非常昂贵，并且会减慢速度（在调整大小期间）。您可能希望每隔几毫秒检查一次节流阀（通过下划线/lodash或jquery插件，或只是添加一些超时）