如何将其从 jQuery 移植到 AngularJS答案

【问题标题】：How do I port this from jQuery to AngularJS如何将其从 jQuery 移植到 AngularJS
【发布时间】：2013-04-12 14:10:51
【问题描述】：

我正在从事一个人工智能项目。我在网页中有一个小坦克和一个网格，坦克只是一个像这样的 div：

<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 更改其边距来实现的。将其移植到 angularJS 是否合乎逻辑？比如这样：

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

既然 AngularJS 会通过设置手表自动更新我的视图，我应该如何处理这个问题？我是否应该有一个带有“actionsToBeExecuted”的模型对象并且当它不为空时我触发“goUp()、goLeft()...”等函数？我怎样才能使它改变时触发功能？我不知道如何移植它，甚至是否应该移植它。

【问题讨论】：

您可以将代理动画包装在 Angular 指令中。 nameOfJavascriptObject 是干什么用的？无论您拥有当前触发动画的任何代码，现在都应该修改该指令将 $watch 的某些模型/范围属性。当手表触发时，执行动画。
是的，但我不知道该怎么做

标签： javascript jquery angularjs

【解决方案1】：

这是一个简单的例子，你怎么做：

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

可以简单的表达agent的外观属性（如位置、角度）使用 javascript 对象并操作属性。

在指令中，将该对象绑定到范围和$watch 基于外观属性和动画关于属性如何变化。（例如，如果 angle 发生变化，则调用 rotate()）

【讨论】：