0

我正在尝试在 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">♖&lt;/span></td>
4

3 回答 3

2

问题出在您的action功能上：

  • 您声明action为返回函数属性对象的函数。
  • 似乎您想创建它，IIFE但最后却错过()了。
  • 为什么你仍然需要创建它IIEF？
  • 内部ngClick您尝试将其action称为对象：actions.
  • 如果您要编写，actions().那么它会起作用，但这不是必需的（请参阅解决方案）。
  • Angular.js ( $parse) 忽略了你的错误而不告诉你任何事情。
  • 阅读我的答案以了解为什么angularjs ng-click 默默地吃错误

解决方案：

$scope.actions = {
  move: function(index, file) {
      console.log(arguments);
  }
}
于 2014-01-29T17:14:15.827 回答
1

我认为“最小”的解决方法是在“动作”定义的末尾添加缺少的“自动执行”括号，就像在“样式”定义的末尾一样。但是，Ilan Frumer 展示的示例更简单，只需将其声明为对象，而不是自动执行函数。

于 2014-01-29T17:26:14.167 回答
0

您可以附加到您的 a 并将 ng-click 事件绑定到该按钮。

<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">♖&lt;/span>
    </button>
</td>
于 2014-01-29T17:13:02.543 回答