Question

花了一些时间寻找答案，抓了几行不同的示例代码，它也只是出错了。

目标：

点击按钮＆gt;按钮添加了类＆＃34;活动＆＃34;到一个div。在div.active里面还有另一个元素，它有一个从div.active

中删除.active的函数

HTML：

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <button ng-click="slidePanel='active'">Open Div 1</button>
    <div class="div1" ng-class="slidePanel">
        <div class="close" ng-click="removeActive()">Close</div>
        Hi I'm a Slide Panel
    </div>
  </div>
</body>

JS：

 angular.module('myApp', [])
.controller('myCtrl', ['$scope', function ($scope) {

$scope.removeActive = function () {

    //Errors with Element is not defined
    /*var myEl = angular.element(element.getElementsByClassName('div1'));
    myEl.removeClass('active');*/


    //Errors with myEl.removeClass is not a function
    var myEl = document.getElementsByClassName('div1');
    myEl.removeClass('active');

    //Errors with [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!
    /*var myEl = angular.element('div1');
    myEl.removeClass('active');*/



    //Errors with Element is not defined
    /*var query = element[0].querySelector('.div1');
    var wrappedQueryResult = angular.element(query);
    query.removeClass('active');*/

}
}]);

不确定我在这里做错了什么。

FIDDLE

Answer 1

如果使用ng-class

的对象语法，解决方案会更简单

    <button ng-click="slidePanel=!slidePanel">Toggle Div 1</button>
    <div class="div1" ng-class="{active:slidePanel}">
        <div class="close" ng-click="slidePanel=!slidePanel">Toggle</div>
        Hi I'm a Slide Panel
    </div>

不应在控制器中完成DOM操作。始终首先考虑范围，angular有大量工具来管理基于范围模型的dom

ng-class="{active:slidePanel}正在做的是根据表达式active

切换班级slidePanel

的 DEMO

Answer 2

如果您不想使用对象表示法（这是我首选的方法），您也可以将slidePanel设置回空字符串以删除该类。

<div class="close" ng-click="slidePanel=''">Close</div>

删除类AngularJS

2 个答案: