AngularJS AngularJS 怎么用 jQuery

metal · 2013年05月28日 · 最后由 chenge 回复于 2013年05月31日 · 27867 次阅读

AngularJS 这些东西不管数据是不是加载完成，都会第一时间显示页面，这样导致了我这边用 jQuery 的各种困难。例如下面，我取不到 size()。有什么办法让 jQuery 的 ready 等待数据加载完成后执行？

<!-- layout.html -->
<!doctype html>
<html>
<head>
....
<script src="jquery.min.js"></script>
</head>
<body>
<div ng-view></div>
<script>
$(document).ready(function() {
   console.log($('.entry').size());
});
</script>
</body>
</html>

// _product.html
<div ng-repeat="product in products" class="entry">
   ....
</div>

1 个赞

saiga #1 2013年05月28日

你是想要在 ng-view 加载完成后拿 ng-view 里面的东西又不污染 controller？还是...?

aptx4869 #2 2013年05月28日

首先，用 angularjs 最好别用 jquery，这是坏习惯，要改 Don't even use jQuery 然后谁告诉你

AngularJS 这些东西不管数据是不是加载完成，都会第一时间显示页面

去查查 resolve 还有 $q怎么用……

1 个赞

xds2000 #3 2013年05月28日

http://www.aleaiactaest.ch/blog/2012/06/28/angular-js-and-dom-readyness-for-jquery/

Angularjs 正好我在目前的项目中试用。希望能帮助你。

1 个赞

leopku #4 2013年05月28日

Don't even use jQuery +1

1 个赞

saiga #5 2013年05月28日

我也发一段之前写的代码吧，就是用的 resolve，应该还能跑，规不规范得另说...

when('/', templateUrl: '/assets/docatapp/templates/docs_view.html', controller: @DocsViewController, resolve: @user2esolve)

@user3esolve =
  redirect: ($route, $location) ->
    @path = $route.current.params.path
    $location.url @path if @path?
  data: ($q, $doCat, $route, $shared) ->
    deferred = $q.defer()
    unless @path?
      params = $route.current.params
      page = if params.page then params.page else 1
      per = $shared.per()
      $doCat.doc.query {page: page, per: per}, (data) ->
        deferred.resolve(data)
    deferred.promise

@DocsViewController = ($scope, $location, $routeParams, $shared, data) ->
...

benzking #6 2013年05月31日

#2 楼 @aptx4869 官网不是说和 JQuery 配合良好么，怎么就不能用了还有要是不能用 JQuery 那还能用什么

chenge #7 2013年05月31日

#6 楼 @benzking 据了解，是不推荐用 jq 的，应该是写 directive 来补充你需要的功能。它的哲学是声明式编程，jq 是命令式的操作 dom。

metal #8 2013年05月31日

我这种菜鸟深刻的觉得 AngularJS 暂时没有 CanJS 和 emberjs 要『好用』。

chenge #9 2013年05月31日

就你的例子看，可以先算好 size, {{size}}就可以了。 NG 的思路是页面不写 js，这个要改的习惯。

Rei #10 2013年05月31日

#8 楼 @metal 我粗略看了一下教程，angularjs 用的是另一种理念，不要用代码操作 dom，只要声明好了就会自己更新。

aptx4869 #11 2013年05月31日

#8 楼 @metal 你还不如讲清楚要取得这个$('.entry').size()是用来干嘛的吧，在这里和直接products.length什么的有啥不同么……干嘛还要绕个圈从 dom 里面取

metal #12 2013年05月31日

#9 楼 @chenge 我后来就是用 ng-repeat 的$index 搞定了。我只是觉得和以前的写法比起来让我有点不习惯。写的时候可能我还是写后端的思维，这个可能是硬伤。

aptx4869 #13 2013年05月31日

#12 楼 @metal 我觉得 angular 更贴近后端吧……一般都不用去管 dom 只管把模型弄好就成了，html 要啥直接写，没事老$(query) 才更反人类吧……

chenge #14 2013年05月31日

#12 楼 @metal 可看看我的《NG 的思路》，了解它的想法，顺着它的思路写。本来的目的就是避免操作 DOM。

需要登录后方可回复, 如果你还没有账号请注册新账号