ng-click不执行td单元格

Question

我正在尝试在Angular中创建一个棋盘，并且大部分都是从成功转向成功。我创建了一个代表起始位置的数据结构，现在我的HTML就像我下面粘贴的一样简单。返回类的相关代码有效，但我正在尝试添加一个带有相同参数的ng-click处理程序（第一行仅在HTML下面;实际上等于第一列，或棋盘上的“A”文件）。

但是，未达到ng-click，actions.move（）的相关Javascript代码。在标记下方，我粘贴了一些Javascript，并在其下面生成了一些生成的DOM。我做错了什么？

HTML:

<div ng-controller='ChessBoardController'>
  <table>
    <tr ng-repeat="rank in model.board">
      <td ng-class="styles.square($index, 'A')" ng-click="actions.move($index, 'A')"><span ng-bind-html="rank.A"></span></td>
      <td ng-class="styles.square($index, 'B')" ><span ng-bind-html="rank.B"></span></td>
      <td ng-class="styles.square($index, 'C')" ><span ng-bind-html="rank.C"></span></td>
      <td ng-class="styles.square($index, 'D')" ><span ng-bind-html="rank.D"></span></td>
      <td ng-class="styles.square($index, 'E')" ><span ng-bind-html="rank.E"></span></td>
      <td ng-class="styles.square($index, 'F')" ><span ng-bind-html="rank.F"></span></td>
      <td ng-class="styles.square($index, 'G')" ><span ng-bind-html="rank.G"></span></td>
      <td ng-class="styles.square($index, 'H')" ><span ng-bind-html="rank.H"></span></td>
      </td>
    </tr>
  </table>
</div>

Javascript:

$scope.styles = (function() {
    return {
        square: function(index, file) {
            if ((index + (file.charCodeAt() % 2)) % 2) {
              return 'lightSquare';
            }
            else {
              return 'darkSquare';
            }
        }
    }
})();

$scope.actions = (function() {
    return {
        move: function(index, file) {
            console.log(arguments);
        }
    }
});

Generated DOM:

<td ng-class="styles.square($index, 'A')" ng-click="actions.move($index, 'A')" class="darkSquare"><span ng-bind-html="rank.A" class="ng-binding">♖</span></td>

Answer 1

问题在于您的action功能：

• 您将action声明为返回函数属性对象的函数。
• 您似乎想将其设为IIFE，但最后错过了()。
• 为什么还需要将其创建为IIEF？
• 内部ngClick您尝试将action称为对象：actions.
• 如果你要写actions().那么它会起作用，但不需要（见解决方案）。
• Angular.js（$parse）在不告诉你任何事情的情况下忽略了你的错误。
• 阅读我的回答，了解原因angularjs ng-click silently eats errors

<强>解决方案：

$scope.actions = {
  move: function(index, file) {
      console.log(arguments);
  }
}

Answer 2

我认为“最小”的修复方法是在“actions”定义的末尾添加缺少的“自动执行”parens，就像你在“样式”定义结尾时所做的那样。但是，Ilan Frumer显示的示例更简单，只需将其声明为对象，而不是自动执行函数。

Answer 3

您可以将ng-click事件追加到a按钮并将其添加到该按钮。

<td>
    <button ng-class="styles.square($index, 'A')" ng-click="actions.move($index, 'A')"
          class="darkSquare"><span ng-bind-html="rank.A" class="ng-binding">♖</span>
    </button>
</td>