Question

我尝试使用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

此外，当活跃的＆＃39; class被添加到锚标记中，我的CSS没有被应用于标记，尽管“活跃”＃类本身正在反映DOM。

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

Answer 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：无：）

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

1 个答案: