jquery - 将 AngularJS/AngularUI 与 d3.js 和 DOM 效果结合使用

Question

我有兴趣在我正在进行的项目中使用 AngularJS。我读了很多相关内容，观看了视频，完成了几个示例应用程序。这一切都很有道理，我认同这些概念。

我正在做的项目需要做一些 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 数据绑定(bind)的声明性语法是可行的方法，并且我愿意全力以赴并采用样式、约定或其他任何东西。但除了简单的演示之外，我不知道如何开始。

有人可以向我指出一个使用(最好是演示使用)的示例项目:

• AngularJS
• jQuery

如果提到了 D3，那就更好了 =) 我并不特别关心 jQuery-UI，但它的存在并不会伤害我。

注意

我看到了this question ，但这些答案对于 Angular 新手来说并没有多大帮助。

Answer 1

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

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

最终您还会想知道 Controller 和指令如何进行通信，为此您需要查看 $scope API: http://docs.angularjs.org/api/ng .$rootScope.Scope

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

AngularJS 和 jQuery 可以很好地协同工作 - 只需在 Angular 之前添加 jQuery 脚本就可以了。

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