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

【问题标题】：jQuery error on binding - CSS not being applied to dynamically generated class绑定时出现 jQuery 错误 - CSS 未应用于动态生成的类
【发布时间】：2014-07-09 03:29:55
【问题描述】：

我正在尝试使用以下函数将一些使用 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>

一般都可以正常使用，但是当我点击锚标签中的文字时，出现以下错误。

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

此外，当“活动”类被添加到锚标记时，我的 CSS 并未应用于标记，尽管“活动”类本身反映在 DOM 上。

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

【问题讨论】：

您是否有理由为此需要 jQuery？根据经验，除非绝对必要，否则最好不要将 Angular 和 jQuery 混合使用。

标签： jquery css angularjs anchor

【解决方案1】：

DOM 操作只能通过指令来完成（我猜showZone 在控制器中）。

不要直接添加/删除类，而是尝试使用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：无 :)

【讨论】：