AngularJS ng-hide not working

Question

Markup looks like:

<div id="communication-list" ng-controller="contactListController">
    <li ng-repeat="contact in contacts" ng-controller="contactItemController" ng-dblclick="chatWithUser(contact)" ng-click="contactItemClick($event)">
        <div class="name">{{ contact.username }}</div>
        <ul ng-hide="popoverHide">
            <button ng-click="chatWithUser(contact)">Send Message</button>
        </ul>
    </li>
</div>

contactItemController looks like:

FF.controller('contactListController', ['$scope', '$rootScope', function($scope, $rootScope) {
    // Start Text chat
    $scope.chatWithUser = function(currentContact) {
        AppManager.startConversation(currentContact.id);
    }
}
FF.controller('contactItemController', ['$scope', '$element', function($scope, $itemElement) {
    $scope.popoverHide = true;
    $scope.contactItemClick = function(event) {
        console.log('test'); // prints.
        $scope.popoverHide = !$scope.popoverHide;
        event.stopPropagation();
    };
}]);

Could there be scope problems? Not sure what is happening. I also tried setting $scope.popoverHide to false just test but no success.

Answer 1

Place it inside your controller with the scope:

FF.controller( 'contactListController', ['$scope', '$rootScope', $element, function( $scope, $rootScope, $itemElement ) 
{
    $scope.chatWithUser = function( currentContact )
    {
        AppManager.startConversation( currentContact.id );
    }

    $scope.popoverHide = true;
    $scope.contactItemClick = function( event )
    {
    console.log('test'); // prints.

    $scope.popoverHide = !$scope.popoverHide;

        event.stopPropagation();
    };
}

Answer 2

I'm not completely sure what you're doing, but there are a few things that can make things easier:

1. Use valid html. Angular manipulates the dom directly. Thus invalid html can lead to hard to debug errors.

   • the outer div should probably be an ul
   • the inner div in li could be problematic
   • the innermost ul (containing the button ) is not required (and containing only the button also an error).

2. As you're using nested controllers, use controller as to make things clearer.

3. No need to prevent events with angular's click events.

---

Here's a cleaned version of your code:

 (function (app, ng) { 'use strict'; app.controller('contactListController', [function() { var vm = this; vm.contacts = [ { username: 'A' }, { username: 'B' }, { username: 'C' } ]; vm.chatWithUser = function chatWithUser(contact) { console.log( 'chatting with', contact ); }; }]); app.controller('contactItemController', [function() { var vm = this; vm.popoverHide = true; vm.contactItemClick = function() { vm.popoverHide = !vm.popoverHide; }; }]); }(angular.module('app', []), angular)); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <div data-ng-app="app"> <div id="communication-list" data-ng-controller="contactListController as list"> <ul> <li data-ng-repeat="contact in list.contacts" data-ng-controller="contactItemController as item" data-ng-dblclick="list.chatWithUser(contact)" data-ng-click="item.contactItemClick()" > <span class="name">{{ contact.username }}</span> <button data-ng-hide="item.popoverHide" data-ng-click="list.chatWithUser(contact)">Send Message</button> </li> </ul> </div> </div>