当值更改并且强制不起作用时，$scope 不会正确更新 ng-show答案

【问题标题】：$scope does not update for ng-show correctly when value changes and force doesn't work当值更改并且强制不起作用时，$scope 不会正确更新 ng-show
【发布时间】：2021-02-09 08:25:42
【问题描述】：

当我更改控制器中的值时，使用 ng-show 它不会显示我的 div。我什至尝试使用 apply 强制 $scope ，但它会导致刷新页面的连续循环，因为由于第一个条件未显示，它会遇到另一个条件。

html:

<div class="halloweenMsg" ng-show="isHalloween">
  <div>Happy Halloween!</div>
</div>

<div class="thanksgivingMsg" ng-show="isThanksgiving">
  <div>Happy Thanksgiving!</div>
</div>

<div class="christmasMsg" ng-show="isChristmas">
  <div>Merry Christmas!</div>
</div>

<div class="newyearsMsg" ng-show="isNewYears">
  <div>Happy New Years!</div>
</div>

控制器：

var holidays = {
    HALLOWEEN : 10,
    THANKSGIVING : 11,
    CHRISTMAS: 12,
        NEW_YEARS: 1,
        NONE: 99
}

$scope.isHalloween = false;
$scope.isThanksgiving = false;
$scope.isChristmas = false;
$scope.isNewYears = false;

$scope.displayHandler = {
   displayHoliday: function (holidayVal) {
        if(holidayVal=== holidays.HALLOWEEN) {
           $scope.isHalloween = true;
        } else if (holidayVal=== holidays.THANKSGIVING) {
           $scope.isThanksgiving = true;
        } else if (holidayVal=== holidays.CHRISTMAS) {
           $scope.isChristmas = true;
        } else if (holidayVal=== holidays.NEW_YEARS) {
            $scope.isNewYears = true;
     } else {
            // refresh page since nothing was correct
            $window.location.href = '/'
        }
   }
}

$http({
  method: 'POST',
  url: '/someUrl'
}).then(function (response) {
    if(response.data.holiday === 'Halloween Day') {
        $scope.displayHandler.displayHoliday(holidays.HALLOWEEN);
    } else if (response.data.holiday === 'Thanksgiving Day') {
    $scope.displayHandler.displayHoliday(holidays.THANKSGIVING);
    } else if (response.data.holiday === 'Christmas Day') {
    $scope.displayHandler.displayHoliday(holidays.CHRISTMAS);
    } else if (response.data.holiday === 'new Years Day') {
    $scope.displayHandler.displayHoliday(holidays.NEW_YEARS);
    } else {
         $scope.displayHandler.displayHoliday(holidays.NONE);
     }
}).catch(function (error) {
});

环顾四周后，我尝试了这些修复，但没有任何效果，它要么不显示正确的 div，要么显示错误的 div，然后一遍又一遍地刷新。第一次尝试更改我尝试设置 ng-show 以检查字符串 true 但它没有改变任何东西并且 div 没有显示仍然：

<div class="halloweenMsg" ng-show="isHalloween === true;">

第二次尝试是使用将 $apply 包装在 ng-show 值的每个设置周围，但随后它会执行连续循环，认为摘要循环未完成并由于某种原因继续运行并点击 else 语句并刷新连续翻页：

$scope.$apply(function() {
 $scope.isHalloween = true;
});

最后是设置一个超时或检查一个 $digest 是否已经在进行中，而不是启动一个新的。然而，这只是偶尔有效，并且不会始终显示 div。

if(!$scope.$$phase) {
   $scope.$apply(function() {
      $scope.isHalloween = true;
   });
}

不确定还有什么可以尝试并确保在设置时正确触发，因为在 http 响应后评估中使用 displayHandler 时，此时的 $scope 似乎不同步。

【问题讨论】：

标签： javascript html jquery angularjs

【解决方案1】：

只需纠正几个简单的错误。

首先，您的if/else 结构不正确。除了最后一个，所有else 语句都应该是else if。

接下来，改变这个：$window/location.href = '/' 至：$window.location.href = '/'

这是一个可行的解决方案：

(function(angular) {
  'use strict';
var myApp = angular.module('spicyApp1', []);

myApp.controller('SpicyController', ['$scope', function($scope) {
var holidays = {
    HALLOWEEN : 10,
    THANKSGIVING : 11,
    CHRISTMAS: 12,
    NEW_YEARS: 1
}

$scope.isHalloween = false;
$scope.isThanksgiving = false;
$scope.isChristmas = false;
$scope.isNewYears = false;

$scope.displayHandler = {
   displayHoliday: function (holidayVal) {
        if(holidayVal=== holidays.HALLOWEEN) {
           $scope.isHalloween = true;
        } else if(holidayVal=== holidays.THANKSGIVING) {
           $scope.isThanksgiving = true;
        } else if(holidayVal=== holidays.CHRISTMAS) {
           $scope.isChristmas = true;
        } else if(holidayVal=== holidays.NEW_YEARS) {
            $scope.isNewYears = true;
        } else {
            // refresh page since nothing was correct
            $window.location.href = '/'
        }
   }
}
$scope.displayHandler.displayHoliday(holidays.HALLOWEEN);

            
}]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-controller-spicy-1-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="app.js"></script>
  

  
</head>
<body ng-app="spicyApp1">
  <div ng-controller="SpicyController">
<div class="halloweenMsg" ng-show="isHalloween">
  <div>Happy Halloween!</div>
</div>

<div class="thanksgivingMsg" ng-show="isThanksgiving">
  <div>Happy Thanksgiving!</div>
</div>

<div class="christmasMsg" ng-show="isChristmas">
  <div>Merry Christmas!</div>
</div>

<div class="newyearsMsg" ng-show="isNewYears">
  <div>Happy New Years!</div>
</div></div>
</body>
</html>

【讨论】：

谢谢兰迪，对不起，你指出的所有错误都是复制和粘贴或我的严重错误输入错误。我的代码中它是正确的，但我检查并让它与你所拥有的相似，但它仍然无法正常工作。我将不得不再次检查，但仍然有一些问题导致错误。