ng-show无效

Question

我使用AngularJs很长时间但发现了一个奇怪的问题。

以下代码效果很好

var app=angular.module("list",[]);
  app.controller("myctrl",function($scope){  
     $scope.get=function(){
        $scope.thiss = false;
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<!-- This code works well-->
<div ng-app="list" ng-controller="myctrl" ng-init="thiss=true">
  <p>
    <button ng-click="get()">Click</button>
    {{thiss}}
    <p ng-show="thiss">Show Content</p>
    <p ng-show="!thiss">Hidden Content</p>
  </p>
</div>

遇到以下代码的问题

如果我使用以下代码在HTML中声明ng-app和ng-controller，如下所示，它无效。奇怪的问题

<!-- This code doesn't update scope for ng-show -->

<div ng-app="list">
   <p ng-controller="myctrl" ng-init="thiss=true">
    <button ng-click="get()">Click</button>
    {{thiss}}
    <p ng-show="thiss">Show Content</p>
    <p ng-show="!thiss">Hidden Content</p>
  </p>
</div>

AngularJS是否缺少任何重要的概念。

非常感谢任何帮助。

Answer 1

<p>是一个块级元素。 根据{{​​3}}

p元素代表一个段落。它不能包含块级元素（包括P本身）。

如果嵌套，当HTML解析器遇到内部p元素（<p ng-show="thiss">Show Content</p>）时，它将隐式关闭外部<p ng-controller="myctrl"...>元素。

所以，解析完成后

<div ng-app="list">
    <p ng-controller="myctrl" ng-init="thiss=true">
        <button ng-click="get()">Click</button> {{thiss}}
    </p><!-- paragraph is implicitly closed. So, "thiss" value is not available to ng-show -->
        <p ng-show="thiss">Show Content</p>
        <p ng-show="!thiss">Hidden Content</p>
    </p>
</div>

您可以找到有关嵌套块元素HTML specification和here的更多讨论。

Answer 2

当这样声明时，ng-init指令无法绑定到声明的控制器的范围。

Answer 3

尝试在ng-app div中使用“ng-init ='thiss = true'”。

Answer 4

在第二个代码中你使用

标签作为容器，这是错误的，标签可以像按钮和

这样的元素，这很好，但你不应该把这些元素放在

标签只需删除p标签，然后放入div就能正常工作。