8

我有兴趣将 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 的新手来说，答案再一次没有太大帮助。

4

2 回答 2

8

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 中的概念需要时间，但它是一个非常全面且高效的框架。坚持下去。

于 2012-12-07T18:15:00.697 回答
1

在 AngularJS 中，如果您需要与元素交互，则请求 $element。

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

$element 应该具有所有 jQuery 功能，如果没有，您可能需要执行 $($element).slideUp() 之类的操作。虽然这看起来有点草率。

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

于 2012-12-07T18:06:52.250 回答