why the ng-class not changed?

Question

Examples of the problem:

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;
}

=====

I finally solved it using jQuery, but I still wonder why angular not success.

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

========

UPDATE

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

I think you need to spend some time in the documentation. You shouldn't be doing any DOM manipulation (ie. jQuery stuff) in your controllers. Have a look at ng-click and ng-class directives as a starting point. — net.uk.sweet, Nov 28 '13 at 17:48
should definitely read this: [How do I “think in AngularJS” if I have a jQuery background?](http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Nov 28 '13 at 19:03
take jquery script tag out of your app while learning angular...will force you to learn how to do things angular way. WIll find you rarely need any jQuery — charlietfl, Nov 28 '13 at 19:05

score 3 · Answer 1 · answered Nov 28 '13 at 17:48

3

You shouldn't be doing DOM manipulation like that in the controller. The correct way to do this is like this

<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;
   };
});

answered Nov 28 '13 at 17:48

eddiec

7,608
5
34
36

now I can add the ".active" class to the tab which be clicked, how to add the ".showChatWraper" class to the parent element? ( The parent element is in another Controller) Because I use CSS to switch the panel show/hide like this: `#xxx{display:none;} .showChatWraper #xxx{display:block;}` – J.Y Han Nov 28 '13 at 18:07
great - looks good. I'm not sure if I'd use emit there, instead I'd probably create a service that manages all of my information about the chat panel. – eddiec Nov 30 '13 at 12:21

why the ng-class not changed?

UPDATE

1 Answers1