将AngularJS/AngularUI与d3.js和DOM效果一起使用

Question

我有兴趣将AngularJS用于我正在进行的项目.我已经阅读了很多关于它的内容,观看了视频,完成了几个示例应用程序.这一切都有道理,我买入概念.

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

我经常使用jQuery; 我明白并喜欢它.我已经使用了AngularJS来获得基础知识.我完全不明白如何$("#my-element").slideUp()从Angular中调用jQuery这样的东西.例如:

假设我在某个页面中有以下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,但它并没有伤害我,因为它在那里.

注意

我看到了这个问题,但对于Angular的新人来说,答案再次没有什么帮助.

Answer 1

DOM操作应该在指令中完成.我会看以下教程.他们真的帮助我理解了这些概念:

AngularJS指令教程第1部分 - http://www.youtube.com/watch?v=Yg-R1gchccg 第2部分 - http://www.youtube.com/watch?v=nKJDHnXaKTY

最终你也会想知道你的控制器和指令如何通信,为此你想看看$ scope API:http://docs.angularjs.org/api/ng.$ rootScope.Scope

您可以使用$ scope.$ broadcast发送事件,并使用$ scope.on监听事件.

AngularJS和jQuery很好地协同工作 - 只是在Angular之前包含jQuery脚本,你应该很高兴.

理解AngularJS中的概念需要时间,但它是一个非常全面且高效的框架.坚持下去.