AngularJs完整的Jquery选择不起作用

Question

我试图使用Jquery插件在AngularJS指令中操纵DOM.

我不确定AngularJs是否正在使用Jquery的完整版本,尽管完整版本脚本在AngularJs脚本位于主体上时是理所当然的,因此理论上AngularJS应该使用完整版本.但是,日志条目inside指令不会显示任何选中内容.虽然Chrome控制台内的完全相同的语法会返回ul中的所有lis.

这是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:我刚刚意识到这一点

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

确实返回带有li的ul但不是

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

这让我觉得没有加载完整版.

Answer 1

加载了jQuery,但是当你$('.gallery')在链接函数中调用时,ng-repeater表达式还没有被评估,所以那时所有这些li元素都不在DOM中.只是为了试验,您可以在调用选择器之前添加延迟

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

然后,您将获得所有li元素,因为您在ng-repeater评估后查询DOM .这就是li从控制台运行选择节点的原因.

在继续之前,当加载库时,表示angular使用jQuery意味着angular.element实现选择器,并且对指令内部元素的引用具有可用的jQuery方法.建议在指令元素的上下文中操作DOM

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

现在,您可能想知道,那么我该如何修改DOM？那么,这取决于你想要实现的目标.由于您希望li在ngRepeater中呈现所有DOM之后操作DOM ,因此您可能需要使用特殊指令checkLast来检查转发器中的最后一个项目何时通过检查是否$last是true

这里有一个的jsfiddle从有人在这个谷歌小组讨论.

或者您可以$watch更改某些范围属性.