绑定时出现jQuery错误-未将CSS应用于动态生成的类

我尝试使用jQuery将一些css绑定到AngularJS应用程序中的元素，使用以下函数：

$scope.showZone = function(obj)
        {
            var zone = obj.srcElement.id;
            if($("."+zone).attr("zone") == "true")
            {
                $("svg."+zone).fadeOut();
                $(obj.toElement).removeClass("active");
                $("."+zone).attr('zone', "false");
            }
            else
            {
                $("svg."+zone).fadeIn();
                $(obj.toElement).addClass("active");
                $("."+zone).attr("zone", "true");
            }

        };

这是HTML：

<li ng-repeat="i in zoneCollection | unique:'zone' | filter:searchZone">
    <a href="" id="{{i.zone.replace(' ','').replace('/','')}}" ng-click="showZone($event)" class="listButton">
        <span class="circle" style="background: #31dbd2"></span>
        <span class="zoneName">{{i.zone}}</span>
  </a>
</li>

另外，当“active”类被添加到锚定标记时，我的CSS不会被应用到标记，尽管“active”类本身会反映在DOM上

a.listButton.active
{
    background-color: #ffd348;
    font-weight: bold;
    border-radius: 6px;
    height: 43px;
    border-bottom:1px solid #fff;
}

---

DOM操作只能通过指令完成（我猜

showZone

在控制器中）

请尝试使用指令，而不是直接添加/删除类

HTML:

)

JS:none:）
您需要jQuery的原因是什么？根据经验，最好不要将angular和jQuery混合使用，除非绝对必要，否则它们不能很好地相互配合。
a.listButton.active
{
    background-color: #ffd348;
    font-weight: bold;
    border-radius: 6px;
    height: 43px;
    border-bottom:1px solid #fff;
}

<li ng-repeat="zone in zoneCollection | unique:'zone' | filter:searchZone">
    <a ng-click="activeZone=zone" class="listButton" ng-class="{active:activeZone===zone}">
        <span class="circle" style="background: #31dbd2"></span>
        <span class="zoneName">{{zone.name}}</span>
  </a>
</li>

<svg>
  <circle
      ng-repeat="zone in zoneCollection | unique:'zone' | filter:searchZone"
      ng-class="{active-zone:activeZone===zone}"
  >
  </circle>
</svg>