0

我在https://jsfiddle.net/8t45enfg/2/
上有代码 源代码很简单，假设数组列表只有一个元素
HTML 代码：

<div ng-controller="myController">
   <table>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Job</th>
      </tr>
      <tr ng-repeat="a in list" ng-click='doClick()'>
        <td ng-if='doCheck()'>{{ a.name }}</td>
        <td>{{ a.age }}</td>
        <td>{{ a.job }}</td>
      </tr>
   </table>
</div>

js代码

module.controller("myController", function($scope) {
  $scope.list = [ { name: 'test', age: 100, job: 'IT'} ]
  $scope.doClick = function() {
    console.log('doClick');
  }
  $scope.doCheck = function() {
    console.log('doCheck');
    return true;
  }
});
  1. 当我运行我的代码时，doCheck()被执行了两次，为什么？应该执行一次
  2. 主要问题是当我点击数据行时，doCheck和doClick都被调用，我认为它只会调用doClick，而不是doCheck，因为我对doCheck没有任何操作。这让我很难理解
4

3 回答 3

1

我不是该主题的完整专家，但这是我对您的问题的理解。

每当在您的页面上进行更改时，该页面都会设置为“脏”，并且当下一个周期达到 时ng-if，它将被重新评估。

所以回答你的第一个问题，在ng-if加载（调用doCheck()）时评估，然后加载页面的其余部分，导致页面设置为“脏”，因此ng-if重新评估，导致doCheck()再次调用.

这会导致“doCheck”出现两次。

这与你的第二个问题相同。每当您单击时，doCheck()都会重新评估 ，从而同时调用doClick()和。doCheck()如果您想避免doCheck()每次都被调用，请在 中使用一个变量ng-if，然后创建一个函数来更改该变量。

我希望这会有所帮助，我相信一些角度向导能够给你一个更好的答案！

于 2019-12-11T04:12:09.463 回答
0

对于第一季度。
doCheck() 是您创建的函数，这意味着它会在每次 html 运行时进行检查。如果要检查标签的条件，则必须使用变量而不是函数。

对于第二季度。当您单击行时doClick将触发，然后doCheck函数也将运行，因为您在ng-if条件下使用了该函数，因此将再次重新评估

我希望这个答案能帮助你理解。我已经对您的代码进行了一些小改动。

<div ng-controller="myController">
 <table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Job</th>
  </tr>

  <tr ng-repeat="a in list" ng-click='doClick()'>
    <td ng-if='doCheckCondition'>{{ a.name }}</td>
    <td>{{ a.age }}</td>
    <td>{{ a.job }}</td>
  </tr>
 </table>
</div>

JS 脚本

module.controller("myController", function($scope) {
  $scope.list = [ { name: 'test', age: 100, job: 'IT'} ]
  $scope.doClick = function() {
     console.log('doClick');

     //Do something and set it true the $scope.doCheckCondition
  }
  $scope.doCheckCondition = false
于 2019-12-11T05:30:27.463 回答
0

这是因为Angular 的摘要循环

以下是Dave Ceddia 博客中的一些重要引述— 多次执行控制器功能，以帮助您了解原因：

Angular 的摘要循环

您所看到的是工作中的摘要循环。摘要循环是 Angular 的自动更新魔法的工作原理——这就是在输入框中输入内容会自动更新引用其值的任何内容的原因。

当摘要循环运行时，它会有效地重绘页面上可能已更改的所有内容。

Angular 使用一些技巧来查找“所有可能已经改变的东西”，主要技术是watchers。当您使用诸如ng-ifand之类的指令以及ng-class使用诸如{{ yourBindingHere }}.

这些东西中的每一个都注册了一个观察者。当 Angular 的摘要循环运行时，每个观察者都被要求更新其状态。在 的情况下 ng-class，它将重新运行绑定到它的函数，以查看是否需要更改。这就是为什么你的控制器函数会运行多次，并且每次页面上发生变化时它都会再次运行。

于 2019-12-11T04:55:26.370 回答