AngularJs全jQuery选择器不工作 [英] AngularJs full Jquery selection not working

问题描述

我想用一个jQuery插件，以操作DOM在AngularJS指令。

I am trying to manipulate DOM in an AngularJS Directive using a Jquery plugin.

我不知道，如果AngularJs使用的是完整版的Jquery与否，虽然完整版剧本是在头部，而AngularJs脚本是对身体所以理论上应该AngularJS使用完整版本。然而，内部指令日志条目不显示任何选择。虽然Chrome的控制台内部的完全一样的语法返回的UL内的所有LIS。

I am not sure if AngularJs is using the full version of Jquery or not, although the full version script is on the head while AngularJs script is on the body so in theory AngularJS should use the full version. However, the log entry inside directive does not show anything is selected. While the exact same syntax inside Chrome console returns all the lis inside the ul.

以下是HTML

<ul id="myUl"  class="gallery unstyled">
    <li class="galleryitem" ng-repeat="i in images">
        <a href="{{i.LargeImage.URL}}"><img ng-src="{{i.MediumImage.URL}}" /></a>
    </li>
</ul>

指令

.directive('gallery',function() {
    return {
        restrict : 'C',
        link : function postLink(scope, iElement, iAttrs) {
        console.log($(".gallery li"));
      }
    }
   }

PS：我刚刚意识到

PS: I just realized that

console.log($(".gallery"));

确实有在其中立而不

does return the ul with li within them but not

console.log($(".gallery li"));

这让我觉得完整版未加载。

Which makes me think that the full version is not loaded.

推荐答案

jQuery是加载，但是当你调用 $（'画廊'）在链接功能 NG-转发前pression尚未评估，因此在那一刻，所有的里元素不在DOM。只是为了实验，可以调用选择前加一个延迟

jQuery is loaded, but when you call $('.gallery') in the linking function the ng-repeater expression has not been evaluated yet, so at that moment all those li elements are not in the DOM. Just to experiment, you can add a delay before calling the selector

setTimeout(function(){
  console.log($(".gallery li"));
}, 1000);

然后，你会得到所有的里元素，因为要查询 NG-中继后的DOM 是评估。这就是为什么运行选择里节点从控制台的作品。

Then, you'll get all the li elements because you are querying the DOM after ng-repeater was evaluated. This is why running selecting the li nodes from the console works.

继续，当它说，角使用jQuery时加载库意味着 angular.element 实现选择和里面的指令元素的引用有jQuery方法问世之前。该建议是操作DOM中指令的元素在背景

Before continuing, when it's said that angular uses jQuery when the library is loaded means that angular.element implements selectors and that references to elements inside directives have jQuery methods available. The recommendation is to manipulate the DOM in the context of the directive's element

iElement.find('li')    // instead of $('.gallery li')

现在，你可能会疑惑，那我怎么修改DOM？嗯，这取决于的究竟是你想实现的。既然你要在所有的里操作DOM 在 ngRepeater 您可能需要使用特殊的指令 checkLast ，当在中继器的最后一个项目是通过检查呈现检查 $最后是真正

Now, you might be wondering, then how do I modify the DOM? Well, it depends of what exactly are you trying to achieve. Since you want to manipulate the DOM after all the li have been rendered in the ngRepeater you might want to use a special directive checkLast that checks when the last item in the repeater is rendered by checking if $last is true

下面是这个的的jsfiddle 从别人论坛/？fromgroups =＃！话题/角/ qTVQYMrAzeM>谷歌小组讨论。

Here's a jsfiddle from someone in this google groups discussion.

或者你可以 $观看对于一些scope属性来改变。

Or you could $watch for some scope property to change.

这篇关于AngularJs全jQuery选择器不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！