javascript - Ng-if 在监视变量变为 false 时不隐藏元素

Question

我试图根据屏幕宽度和测试变量隐藏一个元素。我遇到了一个边缘情况，即 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);

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>

Answer 1

您的问题是 jQuery 事件是在 Angular 摘要循环之外触发的，因此您需要手动调用 $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包装代码等。这里有很多答案已经涵盖了这一点。