Angularjs 为什么ng类没有改变？

问题的例子：

HTML:

CSS:

=====

我最终用jQuery解决了这个问题，但我仍然想知道为什么不能成功

controllers.controller('TabBarController',function TabBarController ($scope,$log,$http) {

    var tabBarItem =$('#tabBar > .item');
    var chatPanelOpen = false;

    tabBarItem.click(function(){
        var tabClass = $(this).data('tab');

        if(!chatPanelOpen){
            $('#wrapper').addClass(tabClass);
            chatPanelOpen = true;
        } else{
            $('#wrapper').removeClass(tabClass);
            chatPanelOpen = false;
        }
    })
})

========

更新

---

您不应该在控制器中进行那样的DOM操作。正确的方法是这样做

<div ng-controller="TabBarController">
    <div ng-click="toggleChatPanel()" ng-class="{tabClass: isChatPanelOpen}">
</div>

controllers.controller('TabBarController', function ($scope) {
   $scope.isChatPanelOpen = false;

   $scope.toggleChatPanel = function () {
     $scope.isChatPanelOpen = !$scope.isChatPanelOpen;
   };
});

controllers.controller（'TabBarController'，函数（$scope）{
$scope.isChatPanelOpen=false；
$scope.toggleChatPanel=函数（）{
$scope.isChatPanelOpen=！$scope.isChatPanelOpen；
};
});

我认为您需要花一些时间阅读文档。您不应该在控制器中执行任何DOM操作（即jQuery操作）。以ng click和ng类指令为出发点。应该明确阅读以下内容：在学习angular时将jquery脚本标记从应用程序中取出……这将迫使您学习如何以angular方式做事。你会发现你很少需要任何jQuerynow我可以将“.active”类添加到要单击的选项卡中，如何将“.showChatWraper”类添加到父元素中？（父元素在另一个控制器中）因为我使用CSS切换面板的显示/隐藏方式如下：

#xxx{display:none；}.showChatWraper{display:block；}

很棒-看起来不错。我不确定我是否会在那里使用emit，相反，我可能会创建一个服务来管理我关于聊天面板的所有信息。

#chatWraper {
    display:none;
}

.showChatWraper #chatWraper{
    display:block;
}

controllers.controller('TabBarController',function TabBarController ($scope,$log,$http) {

    var tabBarItem =$('#tabBar > .item');
    var chatPanelOpen = false;

    tabBarItem.click(function(){
        var tabClass = $(this).data('tab');

        if(!chatPanelOpen){
            $('#wrapper').addClass(tabClass);
            chatPanelOpen = true;
        } else{
            $('#wrapper').removeClass(tabClass);
            chatPanelOpen = false;
        }
    })
})

<div ng-controller="TabBarController">
    <div ng-click="toggleChatPanel()" ng-class="{tabClass: isChatPanelOpen}">
</div>

controllers.controller('TabBarController', function ($scope) {
   $scope.isChatPanelOpen = false;

   $scope.toggleChatPanel = function () {
     $scope.isChatPanelOpen = !$scope.isChatPanelOpen;
   };
});