I'm interested in using AngularJS for a project I'm working on. I've read a lot about it, watched the videos, done several sample apps. It all makes sense, I buy into the concepts.

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

The project I'm doing needs to do some DOM special effects (moving things around the page dynamically, etc.) and incorporate some D3.js charting.

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

I've used jQuery a lot; I get it and like it. I've used AngularJS enough to get the basics. I completely don't understand how to call things like jQuery's $("#my-element").slideUp() from within Angular. For example:

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

Let's say I have the following HTML in a page somewhere:

假设我在某个页面中有以下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>

And in the site JS:

并在网站JS：

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

The best I can tell for how to accomplish something close to this for Angular is:

我可以告诉他们如何为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:

CSS：

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

Somehow that feels like it's not the right approach, but I don't know what the right approach is.

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

I see that there's an AngularUI project that looks neat... but the "documentation" assumes the reader is pretty deeply familiar with Angular, instead of a newcomer.

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

I'm completely willing to buy the idea of Angular that a declarative syntax with data binding for html is the way to go, and I'm willing to go whole-hog and adopt the style, conventions, or whatever. But I can't figure out how to get started with more than simple presentation stuff.

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

Can someone point me to a sample project that uses (and preferably demonstrates the use of):

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

AngularJS
AngularJS
jQuery
jQuery的

Bonus if there's some mention of D3 =) I don't especially care about jQuery-UI, but it doesn't hurt me for it to be there.

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

Note

I saw this question, but the answers were, again, not very helpful for a newcomer to Angular.

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

2 个解决方案

#1

DOM manipulation is supposed to be done in directives. I would watch the following tutorials. They really helped me understand the concepts:

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

AngularJS Directive Tutorial Part 1 - http://www.youtube.com/watch?v=Yg-R1gchccg Part 2 - http://www.youtube.com/watch?v=nKJDHnXaKTY

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

Eventually you are also going to wonder how your controllers and directives can communicate, and for this you want to look at the $scope API: http://docs.angularjs.org/api/ng.$rootScope.Scope

最后，您也会想知道您的控制器和指令如何进行通信，为此您需要查看$ scope API：http：//docs.angularjs.org/api/ng.$rootScope.Scope

You can send events using $scope.$broadcast, and listen to events using $scope.on.

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

AngularJS and jQuery work very well together - just inlcude the jQuery script before Angular and you should be good to go.

AngularJS和jQuery很好地协同工作 - 只是在Angular之前包含jQuery脚本，你应该好好去。

It takes time to understand the concepts in AngularJS, but it is a very well rounded and productive framework. Keep at it.

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

#2

In AngularJS, if you need to interact with the element, you request the $element.

在AngularJS中，如果需要与元素进行交互，则需要$元素。

function Data ($scope, $element) {
    $scope.slideUp = function () {
        $element.slideUp();
    }
}

The $element should have all jQuery functionality, if it doesn't you may need to do something like $($element).slideUp(). Although that does look a bit sloppy.

$元素应该具有所有jQuery功能，如果不是，你可能需要执行类似$（$ element）.slideUp（）的操作。虽然看起来确实有点草率。

The completely correct way to do this would be with a directive, but it's been a while since I worked with AngularJS, and this method should work fine.

执行此操作的完全正确的方法是使用指令，但是自从我使用AngularJS以来已经有一段时间了，这种方法应该可以正常工作。

#1