javascript - AngularJS - 范围变量的ng-show不起作用

Question

我试图在手机方向发生变化时隐藏/显示某些内容。

这是我的看法:

<div ng-controller="ModelCtrl">
    <p ng-show="isLandscape">Landscape - {{ isLandscape }}</p>
    <p ng-show="!isLandscape">Portrait - {{ !isLandscape }}</p>
</div>

这是 Controller 片段:

    $scope.isLandscape = false;

    // Listen for orientation changes
    window.addEventListener("orientationchange", function() {
        // Announce the new orientation number
        switch(window.orientation) 
        {  
          case -90:
          case 90:
            $scope.isLandscape = true;
            alert($scope.isLandscape);
            break; 
          default:
            $scope.isLandscape = false;
            alert($scope.isLandscape);
            break; 
        }
    }, false);

我能够在方向变化时提醒 isLandscape 的正确值，但它似乎没有更新 View ，所以它总是说它处于“纵向模式 - 真”。

Answer 1

你是missing a $scope.$apply() :

$scope.isLandscape = false;

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        $scope.isLandscape = true;
        $scope.$apply(); // <--
        break; 
      default:
        $scope.isLandscape = false;
        $scope.$apply(); // <--
        break; 
    }
}, false);

一旦你改变了这个值，Angular 就没有办法知道它应该检查这个值是否已经改变。 $scope.$apply 将触发摘要循环，这将使 Angular 注意到 $scope.isLandscape 已更改。

---

更好的解决方案是将 $window 注入(inject)到您的 Controller 中，然后向其添加 orientationchange 事件监听器。这将消除对 $scope.$apply 的需要。