Angular.js 针对 class 进行 dom 操纵

Question

我有一个移动导航指令，可以在点击时切换 <ul>。

该指令运行良好；但是，当我使用 class 时，但当切换到 ng-class.

时，我无法再将 class 与 jquery 定位

这是我的模板。

<ul ng-repeat="list in englishList">

<a ng-class="{{list.title}}Hide" mobile-search-slide href="/about"><li><p>{{list.title}}</p><i class="fa fa-chevron-right"></i></li></a>

<ul id="hideMe" ng-class="hideAbout">           
<div ng-cloak ng-repeat="(key, value) in searchData | aboutFilter:'abo'">

 <div ng-repeat="result in value" ng-class-odd="'odd'" ng-class-even="'even'">
   <a ng-href="{{value.title}}/{{result.shortname}}">
   <li><p>{{result.title}}</p><i class="fa fa-chevron-right"></i></li>

   </a>
   </div>  
</div> 
</li>
</ul>

 </ul>

这一行有 class，我想定位：

<ul id="hideMe" ng-class="hideAbout">

这是移动搜索幻灯片指令：

app.directive('mobileSearchSlide', function(){
return{
  restrict: "A",
  link: function(scope, element, attrs) {
      element.click(function(){

        $('.hideAbout').slideToggle();

        console.log(element);
      });

    }
}
});

我计划使用 ng-class 作为 <ul id="hideMe" ng-class="hide{{list.title}}">

Answer 1

ng-class 需要一个表达式作为参数值。就像在这一行中使用 ng-class-odd 一样使用 'hideAbout'：

<div ng-repeat="result in value" ng-class-odd="'odd'" ng-class-even="'even'">

Answer 2

由于 hideAbout 是 class 名称，您可以只使用 class="hideAbout"

在ng-class方面：

<ul id="hideMe" ng-class="{'className'  : expression}">

它需要 class名称和一个表达式。

所以你的语法不正确，所以 ng-class 无法添加 classname.

否则就用ng-class="'hideAbout'"，这里hideAbout在引号内，所以会被认为是字符串。

Updated:

<ul id="hideMe" ng-class="hide{{list.title}}"> 应该如下所示：

<ul id="hideMe" ng-class="'hide ' +list.title">

或

<ul id="hideMe" class="hide {{list.title}}">

DEMO

ul.hide.s4 {
  width: 400px;
  height: 100px;
  background: red;
}

<!DOCTYPE html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul id="hideMe" ng-class="'hide ' +'s'+4">
</ul>
</body>
</html>

Angular.js 针对 class 进行 dom 操纵

Angular.js targeting ng-class for dom manipulation

angularjs

angularjs-directive