angular js ng-click ng-controller 和 ng-app答案

【问题标题】：angular js ng-click ng-controller and ng-appangular js ng-click ng-controller 和 ng-app
【发布时间】：2020-04-14 02:27:59
【问题描述】：

我无法让 angularJS 识别在 ng-app、ng-controller 或 ng-click 中定义的变量。

到目前为止我尝试过的 3 组代码是：

<table>
   <thead>
      <tr>
         <script>
            var app = angular.module('ngClickApp', []);
            app.controller('ngClickCtrl', function ($scope) {
               $scope.clkCount = 0;
            });
         </script>
         <th ng-app="ngClickApp" ng-controller="ngClickCtrl">
             <button class="some-scss" ng-click="clkCount = clkCount +1">
                 <b>someCol {{ clkCount }}</b>
             </button>
         </th>

<table>
   <thead>
      <tr ng-app="ngClickApp">
         <th><button class="some-scss" ng-controller="ngClickCtrl"><b>someCol {{ clkCount }}</b></button></th>
         <script>
            var app = angular.module('ngClickApp', []);
            app.controller('ngClickCtrl', function ($scope) {
               $scope.clkCount = 0;
            });
         </script>

<table>
   <thead>
      <tr ng-app="ngClickApp">
         <th><button class="some-scss" ng-controller="ngClickCtrl"><b>someCol {{ clkCount }}</b></button></th>
         <script>
            var ngClickCtrl = function ($scope) {
               $scope.clkCount = 0;
            };
         </script>

他们三个都无法识别 clkCount。

我发现的示例不使用表格格式。 (https://www.tutorialsteacher.com/angularjs/angularjs-scope) 或 (https://www.tutlane.com/tutorial/angularjs/angularjs-ng-click-event-function-with-example)

另外，出于好奇，为了在第一个代码中测试 ng-click，我定义了一些函数并在 ng-click 中调用它，但它不起作用。

clickTest() {
   console.log('1');
}

<th><button class="some-scss" ng-click="clickTest()">someButton</button></th>

当我点击“someButton”时没有打印 1 而

clickTest() {
   console.log('1');
}

<th><button class="some-scss" (click)="clickTest()">someButton</button></th>

当我点击同一个按钮时确实打印了 1。

所以，我想知道 ng-app、ng-controller 和 ng-click 是否需要某种类型的启动，或者它们必须在 <tbody> 或任何其他建议中，为什么上述所有代码都可以正常工作示例在表格中不起作用。

【问题讨论】：

您的代码对我来说似乎工作正常。您可以在此处使用jsfiddle 或snippet 为此创建small demo 以显示正在发生的问题。
@palaѕн jsfiddle.net/2zbwvd9e/1 这是带有第一个代码 sn-p 的 jsfiddle。当我点击按钮时，{{clkCount} 应该会改变，从 0 开始但不会。
你没有在demo中添加任何angularjs文件的引用。此外，ng-app="ngClickApp" ng-controller="ngClickCtrl" 需要绑定到父容器而不是兄弟容器。这是工作演示：Jsfiddle
@palaѕн 我很抱歉。这是我第一次使用 Jsfiddle，我不确定“任何 angularjs 文件的引用”是什么意思。为了将来使其正确，我应该在我提供的链接中添加什么？另外，我按照您的建议将 ng-app 和 ng-controller 绑定到父容器，但它仍然不起作用。部分是否必须在 .ts 文件中才能正常工作？我不能在html中使用它吗？
你可以阅读关于 js fiddle 设置here。我不知道你到底有什么设置，所以无法帮助你。但是您可以在 HTML 中添加脚本，但将其保留在 body 标记内的底部，以便它仅在 dom 完全加载后才起作用。

标签： javascript html angularjs typescript

【解决方案1】：

    <!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<table>
     <thead>
      <tr ng-app="ngClickApp">
         <th>
           <button class="some-scss" ng-controller="ngClickCtrl" ng-click="clkCount=clkCount+1"><b>someCol {{clkCount}}</b></button>
          </th>
         </tr>
      </thead>
</table>
</body>
</html>
<script>
   var app = angular.module('ngClickApp', []);
   app.controller('ngClickCtrl', function ($scope) {
      $scope.clkCount = 0;

var app = angular.module('ngClickApp', []);
app.controller('ngClickCtrl', function($scope) {
  $scope.clkCount = 0;
});

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <table>
    <thead>
      <tr ng-app="ngClickApp">
        <th>
          <button class="some-scss" ng-controller="ngClickCtrl" ng-click="clkCount=clkCount+1"><b>someCol {{clkCount}}</b></button>
        </th>
      </tr>
    </thead>
  </table>
</body>
</html>

嗨，您不应该将脚本放在表格中。需要将脚本保存在单独的文件中或 HTML 的末尾或 HTML 内的 body 标记上方，以便页面加载更快，因为 javascript 代码可以阻止/延迟加载过程。尽量不要在同一个文件中使用脚本、CSS 或 HTML，以使代码易于阅读、维护和修改。谢谢

【讨论】：