为什么ng-class没有改变？

Question

问题的例子：

http://jsfiddle.net/paloalto/DTXC2/

HTML：

<div ng-app="app">
    <div id="wrapper" ng-controller="AppController" ng-class="showChatPanel">

        <div id="tabBar" class="ui vertical icon menu inverted" ng-controller="TabBarController">
            <a class="item switchChatBtn" data-tab="showChatWraper">Open Chat Panel</a>
        </div>

        <div id="chatWraper" class="ui segment">Chat Panel Opend!!</div>

    </div>
</div>

使用Javascript：

angular.module('app', ['app.controllers']);

var controllers = angular.module('app.controllers', []);

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

    $scope.showChatPanel = '';

    $scope.$on("switchChatPanel", function (event, msg) {
        console.log(msg);
        $scope.showChatPanel = msg;
        console.log($scope.showChatPanel);
        // $scope.$broadcast("switchChatPanel-done", msg);
    });

    $scope.$watch('showChatPanel', function(newVal, oldVal) {
        if(newVal){
            console.log('yeah! It is a newVal !!!');
        } else {
            console.log('still oldVal ');
        }
    });
});

controllers.controller('TabBarController', function TabBarController($scope, $log, $http) {
    var tabBarItem =$('#tabBar > .item');
    tabBarItem.click(function(){
        var tabClass = $(this).data('tab');
        console.log(tabClass);
        $scope.$emit("switchChatPanel", tabClass);
    });
});

CSS：

#chatWraper {
    display:none;
}

.showChatWraper #chatWraper{
    display:block;
}

=====

我终于使用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;
        }
    })
})

https://gist.github.com/naoyeye/7695067

======

更新

http://jsfiddle.net/paloalto/DTXC2/17/

Answer 1

你不应该像控制器那样进行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;
   };
});