angularjs - 在 ng-controller 之外使用 ng 元素

Question

我对 Angular 没有经验。

我正在使用 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，在原始 div 嵌套“外部”，具有 ng-controller 属性。因此，在这个单独的层次结构中没有 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，甚至在 Controller 之外？)但是只有 div 中具有 ng-controller 属性的 ng 元素被评估页面加载后执行功能时。这是正确的吗？

如何让其他 ng-show 在 ng-controller div 的“外部”进行评估？

我在想一个选择是将 ng-controller 附加到整个“页面”div 而不是嵌套的 div。但是我还有哪些其他选择？

编辑:我还尝试简单地将 ng-controller="controllername" 添加到单独的 div。我猜 angular 会“忽略”重复的 ng-controller div？

Answer 1

您面临的问题是 showvar 驻留在您的 Controller 范围内，您对 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 Controller 中将 showvar 设置为 true 时，它​​会将其设置在 innerscope 而不是外部。通过另一个对象访问它来确保您拥有正确的范围时，您应该是安全的。

所以试试这样:

<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