Question

我对角度缺乏经验。

我正在使用angular在网页上创建一系列嵌套div（表单）。顶部div具有ng-controller="controllername"作为属性。在嵌套的div中是一个以ng-show="showvar"为属性的div。

看起来像这样。

<div class="page">
  <div ng-controller="controllername">
    <div ng-show="showvar">Hidden Stuff</div>
  </div>
</div>

当我在showvar上执行函数以使其成立时，div会按预期显示（并在错误时消失）。

我还有一个完全独立的div＆＃39; outside＆＃39;具有ng-controller属性的div的原始嵌套。因此，在这个单独的层次结构中没有ng-controller属性但是我已经使用ng-show="showvar"属性嵌套了另一个div。

更新的HTML结构就是这样

<div class="page">
  <div ng-controller="controllername">
    <div ng-show="showvar">Hidden Stuff</div>
  </div>
  <div class="seperate">
    <div ng-show="showvar">More Hidden Stuff</div>
  </div>
</div>

当页面加载时，两个在单独的嵌套中都带有ng-show="showvar"的div被隐藏，因为ng-hide已被angular附加。当我在页面加载后在showvar上执行函数以使其成立时，只显示ng-controller div中的div。

我（我想）我明白这是因为ng元素是在页面加载时评估的（并且附加了ng-hide，甚至在控制器之外？）但是只评估了具有ng-controller属性的div中的ng元素在页面加载后执行功能时。这是对的吗？

如何让其他ng-show在外面评估＆＃39; ng-controller div？

我在想一个选项是将ng-controller附加到整个页面＆＃39; div而不是嵌套的div。但我还有其他选择吗？

编辑：我也尝试过将ng-controller="controllername"添加到单独的div中。我猜角度＆＃39;忽视＆＃39;重复的ng-controller div？

Answer 1

你的问题是你以2＆＃34; showvar＆＃34;结束了变量：＆＃34; controllername＆＃34;范围和应用范围上的另一个范围（因为您在＆＃34;页面＆＃34; div的html父级中的某处有一个ng-app声明。）

当您加载页面时，您将获得＆＃34; showvar＆＃34;的值。在第一个div的控制器范围内，以及＆＃34;单独的＆＃34;一，你得到＆＃34; showvar＆＃34;应用范围中的变量，它不存在，因此它被解析为＆＃34; false＆＃34; （即使angular在你的应用范围内为你声明了它，你甚至可以在以后修改它的值。）

更改＆＃34; showvar＆＃34;的值时在控制器范围内，它不会改变应用程序范围中的那个，使得＆＃34;分离＆＃34; div永远隐藏=）

Answer 2

您面临的问题是showvar位于您的控制器范围内，您对showvar的第二次使用不在该范围内。

您需要做的是确保变量在需要的地方可用。

假设您将变量添加到parentController（您的示例中没有一个，因此我将添加一个）

<div class="page" ng-controller="parentController">
  <div ng-controller="controllername">
    <div ng-show="showvar">Hidden Stuff</div>
  </div>
  <div class="seperate">
    <div ng-show="showvar">More Hidden Stuff</div>
  </div>
</div> 

app.controller('ParentController', function($scope){
  $scope.showvar = false;
});

这个问题是当你在controllername控制器中将showvar设置为true时，它会在内窥镜而不是外部设置它。通过另一个对象访问它确保你有合适的范围时，你应该是安全的。

所以试试这样：

<div class="page" ng-controller="parentController">
  <div ng-controller="controllername">
    <div ng-show="obj.showvar">Hidden Stuff</div>
  </div>
  <div class="seperate">
    <div ng-show="obj.showvar">More Hidden Stuff</div>
  </div>
</div> 

app.controller('ParentController', function($scope){
  $scope.obj = {
    showvar: false
  }
});

Quick demo

使用ng-controller之外的ng元素

2 个答案: