jQuery 绑定(bind)错误 - CSS 未应用于动态生成的类

Question

我正在尝试使用以下函数将一些使用 jQuery 的 css 绑定(bind)到 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>

它通常工作正常，但是当我点击 anchor 标签中的文本时，出现以下错误。

Error: Syntax error, unrecognized expression: .
    at Function.Sizzle.error (http://localhost:8080/build/vendor/jquery/dist/jquery.js:1437:8)
    at Sizzle.tokenize (http://localhost:8080/build/vendor/jquery/dist/jquery.js:2051:11)
    at Sizzle.select (http://localhost:8080/build/vendor/jquery/dist/jquery.js:2452:20)
    at Function.Sizzle (http://localhost:8080/build/vendor/jquery/dist/jquery.js:843:9)
    at jQuery.fn.extend.find (http://localhost:8080/build/vendor/jquery/dist/jquery.js:2668:11)
    at jQuery.fn.init (http://localhost:8080/build/vendor/jquery/dist/jquery.js:2776:38)
    at jQuery (http://localhost:8080/build/vendor/jquery/dist/jquery.js:76:10)
    at Scope.$scope.showZone (http://localhost:8080/build/src/app/planManager/planManger.js:2065:21)
    at Parser.functionCall (http://localhost:8080/build/vendor/angular/angular.js:10567:21)
    at http://localhost:8080/build/vendor/angular-touch/angular-touch.js:441:9 

另外，当“active”类被添加到 anchor 标记时，我的 CSS 没有应用到标记，尽管“active”类本身反射(reflect)在 DOM 上。

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

Answer 1

DOM 操作只能通过指令完成(我猜 showZone 在 Controller 中)。

与其直接添加/删除类，不如尝试使用 ngClass指令

HTML:

<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:

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

(注意 SVG restrictions)

JS:没有:)