Javascript AngularJS嵌套ng（如果不工作）

不知道为什么，但我不能让这个嵌套的ng工作。我正在打印以控制台$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>

---

这里的问题是

ng if

创建自己的范围。因此，您将在这个新的内部作用域上创建一个属性

screenInfo.crDone

。您可以使用

$parent.screenInfo.crDone

访问正确的作用域属性。但是，我不建议这样做，因为这样会在作用域之间创建不必要的耦合。。。引入第三个

ng if

将需要像

$parent.$parent

-messy这样的链接作用域

或者，可以使用

ng show

控制零部件的可见性。这并没有引入新的作用域，因此您的代码将按预期工作。。。不管嵌套的级别如何

在这个示例中，我尝试使用

ul

和

li

创建嵌套的

ng if

，如果我没有理解这个问题，请评论这篇文章

var-app=angular.module（“app”，[]）；
应用程序控制器（“ctrl”[
“$scope”、“$sce”，
功能（$scope，$sce）{
$scope.parent={
活动：错误，
儿童：{
儿童1：{
活动：错误
},
儿童2：{
活动：错误
},
儿童3：{
活动：错误
},
儿童4：{
活动：错误
},
儿童5：{
活动：错误，
儿童：{
儿童1：{
活动：错误
}
}
}
}
}
$scope.status=功能（活动）{
开关（主动）{
案例“家长”：
$scope.parent.active=！$scope.parent.active；
打破
“儿童1”案：
$scope.parent.childs.child1.active=！$scope.parent.childs.child1.active；
打破
案例“儿童2”：
$scope.parent.childs.child2.active=！$scope.parent.childs.child2.active；
打破
案例“儿童3”：
$scope.parent.childs.child3.active=！$scope.parent.childs.child3.active；
打破
“儿童4”案：
$scope.parent.childs.child4.active=！$scope.parent.childs.child4.active；
打破
“儿童5”案：
$scope.parent.childs.child5.active=！$scope.parent.childs.child5.active；
打破
}
}
}
]);



父母-有5个孩子

子1（活动：{{parent.childs.child1.active}}）（如果parent-active为true）
子2（active:{{parent.childs.child2.active}）（如果子1 active为true）
子3（活动：{{parent.childs.child3.active}）（如果子1和子2活动为真）
child 4（active:{{parent.childs.child4.active}）（如果child 1&child 2&child 3 active为true）

子5（活动：{parent.childs.child5.active}}）（如果子1、子2、子3和子4活动为true）

child5-1（active:{parent.childs.childs.child1.active}）（如果child1&child2&child3&child4&child5 active为true）





{{parent.active？'Deactive'：'active'}}parent
{{parent.childs.child1.active？'Deactive'：'active'}}子级1
{{parent.childs.child2.active？'Deactive'：'active'}}子级2
{{parent.childs.child3.active？'Deactive'：'active'}子3
{{parent.childs.child4.active？'Deactive'：'active'}子4
{{parent.childs.child5.active？'Deactive'：'active'}}Child 5
Hmmm，如果我将嵌套的ng if更改为ng show，则它可以工作。如果子问题出现，def必须为ng，但即使使用
$parent.screenInfo.crDone
也不起作用。您能否在此处显示更多代码，说明此功能不起作用？这个HTML似乎工作得很好：@Claies-修改了原始帖子，现在出现了整个问题/代码。在
screenInfo.rlScreen==x
的内部，我没有使用嵌套的ng ifs，而是使用了ng show，同样的问题仍然存在，唯一不同的是ng show将div添加到DOM中，但只是将它们隐藏起来，因为值与条件不匹配。这告诉我，即使是ng show也以某种方式绑定到原始ng-if的相同嵌套$范围。另一件事我不明白的是，为什么在这段代码中我遇到了嵌套ng if问题…我还有很多其他代码段嵌套了ng if…两个，三个深度，但在这些深度中，我没有做任何特殊的事情，并且使用相同的{{thisVarName}或{{objName.thisKeyName}}从父范围访问所有内容，
getSomething
做什么？这个代码仍然不是一个好代码；当您对
rlShow
函数中的所有值进行硬编码并忽略
页面
变量时，它会起作用。您确定
getSomething
正在返回您期望的结果吗？ng if中的ng show是否绑定到ng if的嵌套范围？我将
更改为
，问题仍然存在。我认为嵌套的ng show现在绑定到ng if的嵌套范围。是吗？你说得对。任何访问
$scope
A: 
B: 
C: