AngularJs 完整的 Jquery 选择不起作用

Question

我正在尝试使用 Jquery 插件在 AngularJS 指令中操作 DOM。

我不确定 AngularJs 是否使用完整版的 Jquery，尽管完整版脚本在头部而 AngularJs 脚本在主体上，所以理论上 AngularJS 应该使用完整版。但是，指令中的日志条目没有显示任何被选中的内容。虽然 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？嗯，这取决于你到底想达到什么目的。既然要操作 DOM，毕竟 li已在 中呈现ngRepeater 你可能想使用一个特殊的指令 checkLast通过检查是否 $last 来检查转发器中的最后一项何时呈现是 true
这是一个 jsfiddle来自此人 google groups discussion .

或者你可以 $watch某些范围属性要更改。