Question

这是Angular js应用程序的代码片段。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
  <p ng-controller="myctrl">
    <button ng-click="get()">Click</button>
    <p ng-show="thiss">This is it</p>
  </p>
</div>

＆＃13;

我一直在学习AngularJS。我无法理解为什么这个简单的例子无法工作。我一直关注w3cschools教程，语法似乎与它完美对齐。是否与范围界定有关？或者我必须将ng-show与模型数据绑定。

我也做了以下但是似乎没有用。

<div ng-app="list" ng-init="thiss = true">
     <p ng-controller="myctrl" >
     <button ng-click="thiss=false">Click</button>
    <p ng-show="thiss"> This is it</p>
     </p>
</div>

为什么将控制器放在div标签上？但是当它在子元素中时无法工作？

Answer 1

它不起作用，因为你有＆lt; p＆gt; ＆lt; p＆gt;内的标记标签。如果您按如下方式更改代码，它应该可以工作。

<div ng-controller="myctrl" >
    <button ng-click="thiss=false">Click</button>
    <p ng-show="thiss"> This is it</p>
</div>

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
  <div ng-controller="myctrl">
    <button ng-click="get()">Click</button>
    <p ng-show="thiss">This is it</p>
  </div>
</div>

＆＃13;

查看Why <p> tag can't contain <div> tag inside it?了解＆lt; p＆gt;的原因不能包含块级元素

Answer 2

请尝试以下代码。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-controller="myctrl">
  <p 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>

function strToDateTest() {
   var str = '2016-02-01';
   str +='T00:00:00.000Z';
   var d = new Date(str);
   Logger.log(d);
}

Answer 3

试试这个。我刚刚从ng-controller移除了<p>，并将div放入ng-app。不知道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>
<div ng-app="list" ng-init="thiss = true" ng-controller="myctrl">
  <p>
    <button ng-click="get()">Click</button>
    <p ng-show="thiss">This is it</p>
  </p>
</div>

Answer 4

请不要尝试制作HTML标准，请遵循HTML定义的规则。不要放置嵌套的<p>标签。 AngularJS有时候不适用于无效的DOM。我使用<span>标记而非嵌套<p>正常工作。

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="list" ng-init="thiss = true">
  <p ng-controller="myctrl">
    <button ng-click="get()">Click</button>
    <span ng-show="thiss">This is it</span>
  </p>
</div>

＆＃13;

有关更多信息，请验证HTML。请检查以下HTML代码：https://validator.w3.org/#validate_by_input

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>
<p>
</p>
</p>
</body>

</html>

Answer 5

从依赖项
中删除空白数组后尝试

var app = angular.module('list');

确保控制器应放在<div ng-controller="myctrl">
中

Answer 6

您的代码：

 <p ng-controller="myctrl">
    <button ng-click="get()">Click</button>
    <p ng-show="thiss">This is it</p>
    </p>

这是浏览器根据DOM解释html的方式：

    <p ng-controller="myctrl">
     <button ng-click="get()">Click</button>
   </p>
   <p ng-show="thiss">This is it</p>
   <p></p>

因此控制器“myctrl”的范围不适用于嵌套para，尝试使用div而不是嵌套<p>

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>
<div ng-app="list" ng-init="thiss = true">
  <div ng-controller="myctrl">
    <button ng-click="get()">Click</button>
    <p ng-show="thiss">This is it</p>
  </div>
</div>

AngularJS：为什么ng-controller在ng-show和ng-click以及<p>标签中表现得很奇怪？

6 个答案: