角度干扰 jQuery 查找答案

【问题标题】：Angular interfering with jQuery find角度干扰 jQuery 查找
【发布时间】：2014-04-03 17:29:26
【问题描述】：

美好的一天，

我有一些 javascript 代码，我尝试使用 jQuery find() 方法在页面呈现后将一些样式应用于包含名为 gridfooter 的类的 div 元素。

这是网格页脚的预渲染 HTML：

<div ng-if="messages != null && messages.length > 0" class="gridfooter">
    <table class="list-footer">
    ...
    </table>
</div>

这是呈现的 HTML：

<div ng-controller="gridController" id="message-grid" ng-show="visible" class="ng-scope">
  <div class="panel">
    <div class="gridheader" style="color: red; border: 1px solid red;">..</div>
    <div class="gridcontent" style="color: red; border: 1px solid red;">..</div>
    <div class="gridfooter">..</div>
  </div>
</div>

这是我用来查找 gridfooter 的 JavaScript：

var thePanel = $('#message-grid .panel'),
    theFooter = thePanel.find(".gridfooter"),
    theContent = thePanel.find(".gridcontent"),
    theContentFooter = theContent.find(".gridfooter");

    $('#message-grid .panel').children().css({ "color" : "red", "border": "1px solid red" });

我的问题是带有 gridfooter 类的 div 的样式不像 gridheader/gridcontent。

但是，当我从预渲染的 HTML 中删除 angular ng-if 指令时：

<div class="gridfooter">
    <table class="list-footer">
    ...
    </table>
</div>

然后用gridfooter渲染的div被样式化

<div ng-controller="gridController" id="message-grid" ng-show="visible" class="ng-scope">
    <div class="panel">
        <div class="gridheader" style="color: red; border: 1px solid red;">..</div>
        <div class="gridcontent" style="color: red; border: 1px solid red;">..</div>
        <div class="gridfooter" style="color: red; border: 1px solid red;">..</div>
    </div>
</div>

我认为这不起作用的原因是：jQuery not working with ng-repeat。这个问题的答案涉及事件委托。

我是否会正确假设 ng-if 处理程序在运行时绑定，因此 .gridfooter 不存在？

如果是这样，我不确定如何解决此问题。

有什么建议吗？

TIA，

科森

【问题讨论】：

为什么不写css？ $('#message-grid .panel').children().css({...}); 等于 css 中的 #message-grid .panel > * { ... }
另外，你是对的，jquery 代码在运行时执行一次，并且每次角度输出更改标记时都必须重新调用（我猜），但事件委托是基于事件的，所以你d 必须在角度回调上运行该代码（不知道是否存在）
@Alex - children().css({ }) 只是为了看看我是否可以应用一种样式。我计划在解决问题后将其删除。

标签： jquery angularjs

【解决方案1】：

您应该使用ng-class 将样式应用于您的元素。除了在指令中之外，将 JQuery 并排使用 Angular JS 代码并不是一个好习惯。

ngClass

ngClass 指令允许您在一个通过数据绑定表示所有类的表达式的 HTML 元素待补充。

您可以评估任何表达式，然后将类应用于您的元素。

【讨论】：