AngularJs完整的Jquery选择不起作用

发布时间：2020-12-17 17:18:04 所属栏目：安全来源：网络整理

导读：我试图使用 Jquery插件在AngularJS指令中操纵DOM. 我不确定AngularJs是否正在使用Jquery的完整版本,尽管完整版本脚本在AngularJs脚本位于主体上时是理所当然的,因此理论上AngularJS应该使用完整版本.但是,日志条目inside指令不会显示任何选中内容.虽然Chrome

我试图使用 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"));

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

解决方法

加载了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？那么,这取决于你想要实现的目标.由于你想在ngRepeater中渲染所有li之后操作DOM,你可能想要使用一个特殊的指令checkLast来检查转发器中的最后一个项是通过检查$last是否为真来呈现的

这是google groups discussion中某人的jsfiddle.

或者你可以观察一些范围属性来改变.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!