Question

美好的一天，

我有一些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中删除角度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不存在？

如果是这样，我不能100％确定如何解决这个问题。

有什么建议吗？

TIA，

COSON

Answer 1

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

ngClass

ngClass指令允许您动态设置CSS类 HTML元素通过数据绑定表示所有类的表达式待补充。

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

角度干扰jQuery查找

1 个答案: