我正在做的项目需要做一些DOM特效(动态地移动页面等等)并合并一些D3.js图表​​.

我经常使用jQuery;我明白并喜欢它.我已经使用了AngularJS来获得基础知识.我完全不明白如何在Angular中调用类似jQuery的$(“#my-element”).slideUp().例如：

假设我在某个页面中有以下HTML：

<!-- somewhere in app.html -->
<div id="my-element">
  <p>Here's some data about your stuff...!</p>
  <button id="hider">Hide this (but with a cool transition)</button>
</div>

并在网站JS：

// somewhere in app.js ... pretend it's all nice and DRY.
  function main () {
    $("#my-element button")
      .click(function () { $("#my-element").slideUp()});
  }    
  $(main);

我可以告诉他们如何为Angular完成接近这个的最好的事情是：

HTML

<!-- somewhere in app.html -->
<div ng-controller="Data">
  <p>Here's some data about your stuff...!</p>
  <button ng-click="slideUp()">Hide this (but with a cool transition)</button>
</div>

CSS：

// somewhere in app.css
function Data ($scope) {
  $scope.slideUp = function () {
    $("#my-element").slideUp();
  }
}

不知怎的,感觉这不是正确的方法,但我不知道正确的方法是什么.

我看到有一个看起来很整洁的AngularUI项目……但是“文档”假设读者对Angular非常熟悉,而不是新手.

我完全愿意购买Angular的想法,即使用html的数据绑定的声明性语法是要走的路,而且我愿意全力以赴并采用风格,约定或其他任何方式.但我无法弄清楚如何开始使用简单的演示文稿.

有人能指出我使用的示例项目(最好演示使用)：

> AngularJS
> jQuery

奖金,如果有一些提到D3 =)我不特别关心jQuery-UI,但它并没有伤害我,因为它在那里.

注意

我看到了this question,但是对于Angular的新人来说,答案再次没什么帮助.