javascript - AngularJS 嵌套 ng-if 不工作

Question

不知道为什么，但我无法让这个嵌套的 ng-if 工作。我正在打印以控制台 $scope 值，以便我可以看到它的正确性，但 html 未显示。

我本质上是使用 $scope.vars 根据顶部的按钮显示/隐藏页面的某些部分。三个按钮

编辑我原来发布的代码:

  // when the user lands on the page, the screen defaults to button1 DIVs
$scope.screenInfo.rlScreen = 1 ;
$scope.screenInfo.crDone = 0 ;
$scope.screenInfo.prDone = 0 ;

  $scope.rlShow = function(screen) {
    $scope.screenInfo.rlScreen = screen ; 
    if (screen == 3) {
      var page1 = getSomething("current") ;
      $scope.crData= page1.data ;
      $scope.crRowSize = page1.rowCount ;
      $scope.crStatus = page1.status ;
      $scope.screenInfo.crDone = page1.done ;
    } else if (screen == 4) {
      var page2 = getSomething("past") ;
      $scope.prData = page2.data ;
      $scope.prRowSize = page2.rowCount ;
      $scope.prStatus = page2.status ;
      $scope.screenInfo.prDone = page2.done ;

    }
  }

////// HTML below

<div> <!-- these buttons are always present at the top of the page -->
  <button id="button1" ng-click="rlShow(1);">1 </button> 
  <button id="button2"  ng-click="rlShow(3);">3 </button>
  <button id="button3" ng-click="rlShow(4);">4 </button> 
</div>

<div ng-if="screenInfo.rlScreen==1">  <!-- works by default -->
   Default page...shows user options to select then submit
   <button id="button2" ng-click="rlShows(2);">2 </button>
</div>

<div ng-if="screenInfo.rlScreen==2">  <!-- works when button2 is clicked -->
  <div ng-if="returnedData.length==0">
    <img ng-src="img/loading_circles.gif"><br>retrieving information...
  </div>
  <div ng-if"returnedData.length > 0">
      The following items were found:
      ...
  <div>
</div>
<div ng-if="screenInfo.rlScreen==3"> <!-- only this DIV works, no childs work -->
   Test vars just to see what is making it into screenInfo.rlScreen==3
   <br>A: {{screenInfo.crDone}}
   <br>B: {{parent.screenInfo.crDone}}
   <br>C: {{$parent.screenInfo.crDone}}
  <div ng-if="screenInfo.crDone==0">
    <img ng-src="img/loading_circles.gif"><br>retrieving information...
  </div>
  <div ng-if"screenInfo.crStatus==0">
      Nothing found
  </div>
  <div ng-if"screenInfo.crStatus > 0">
      The following items were found:
      ...
  <div>
</div>

<div ng-if="screenInfo.rlScreen==4"> <!-- only this DIV works, no childs work -->
  <div ng-if="screenInfo.prDone==0">
    <img ng-src="img/loading_circles.gif"><br>retrieving information...
  </div>
  <div ng-if"screenInfo.prStatus==0">
      Nothing found
  </div>
  <div ng-if"screenInfo.prStatus > 0">
      The following items were found:
      ...
  <div>
</div>

在上面的代码中，用户默认登陆 screen1，用户看到表单/选项并单击按钮2，screenInfo.rlScreen==2 启动，在检索数据时以及当返回数据，循环消失，满足剩下的两个条件之一并显示正确的信息 - 这一切都有效。

但是，如果用户点击顶部的Button3或Button4，我可以在控制台中看到screenInfo.rlScreen==3(或4)被激活，但后续的screenInfo.crDone==0或screenInfo.prDone ==0 永远不会触发，也不会出现任何剩余的用于显示内容的 ng-if。

在 screenInfo.rlScreen==3(或 4)中，我测试了各种条件，A:、B: 和 C:...所有这些都显示:

A: 
B: 
C: 

Answer 1

这里的问题是 ng-if创建自己的范围。因此，您最终将创建一个属性 screenInfo.crDone在这个新的内部范围上。您将能够使用 $parent.screenInfo.crDone 访问正确的范围属性。但是，我不建议这样做，因为它会在范围之间产生不必要的耦合......引入第三个 ng-if然后需要像 $parent.$parent 这样的链接范围- 凌乱的。

或者，您可以使用 ng-show控制组件的可见性。这不会引入新的作用域，因此您的代码将按预期工作......无论嵌套级别如何。