While working with Angular, I couldn't help but notice how my HTML was getting cluttered with inline JS-like code.
For instance:
<table>
<tr>
<td ng-click="move('nw')" id="nw" ng-bind-template="{{northwest}}"></td>
<td ng-click="move('n')" id="n" ng-bind-template="{{north}}"></td>
<td ng-click="move('ne')" id="ne" ng-bind-template="{{northeast}}"></td>
</tr>
<tr>
<td ng-click="move('w')" id="w" ng-bind-template="{{west}}"></td>
<td ng-click="move('center')" id="center" ng-bind-template="{{center}}"></td>
<td ng-click="move('e')" id="e" ng-bind-template="{{east}}"></td>
</tr>
<tr>
<td ng-click="move('sw')" id="sw" ng-bind-template="{{southwest}}"></td>
<td ng-click="move('s')" id="s" ng-bind-template="{{south}}"></td>
<td ng-click="move('se')" id="se" ng-bind-template="{{southeast}}"></td>
</tr>
</table>
It has been ingrained in me that JavaScript should be separated from HTML. I understand that Angular is unique and uses a lot of attribute-like methods, but is there a way to isolate my HTML and Angular, similar to how I would treat a DOM method?
For example:
var north = document.getElementById("n");
north["ng-click"] = function() { move(this.id); }