Как перенести это из jQuery в AngularJS

Question

Я работаю над проектом «Искусственный интеллект». У меня есть на веб-странице немного резервуара и сетки, танк просто ДИВ так:

<div id="agent" ></div> 

Затем я использую JQuery, чтобы сделать что-то вроде этого:

agent = $('#agent').setUpAgent(); 

//examples of usage: 
agent.goUp(); 
agent.goLeft(); 
agent.doActions['left','right','down']; // (will execute: goLeft, goRight, goDown functions. 

Реализация этих методов достаточно прост:

Agent.prototype.goLeft = function() { 
    this.agentDiv.rotate(45); // rotate the jQuery-wrapped div 
    this.agentDiv.animate({"margin-left": "-=51px"}, "slow"); //51 is the step size 
} 

Как вы можете видеть движение на агенте достигается за счет изменения рентабельности за счет jQueryAnimate. Логично ли переносить это на угловоеJS ?. Например, как это:

<div agent="nameOfJavascriptObject" ></div> 

так AngularJS обновит мой взгляд автоматически, установив часы, как я должен подойти к этому? Должен ли я иметь объект модели с «actionsToBeExecuted», а когда он не пуст, я запускаю функции «goUp(), goLeft() ...» и т. Д.? Как я могу сделать так, чтобы функции запускались, когда они менялись? Я не знаю, как это сделать, или даже портировать его вообще.

Answer 1

Вот простой пример, как вы могли бы сделать это:

http://plnkr.co/edit/7wG08Twvt7jufIpvjHFl?p=preview

Вы можете просто выразить внешний вид свойства агента (например, положение, угол) с помощью объекта яваскрипта и манипулировать свойствами ,

В директиве, связываются, что объект в объеме и в $watch Apperance свойство и анимировать основе от того, как изменения свойств. (например, если angle изменяется, то звоните rotate())