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.

How to make the HTML less of a mess in this case?

Dan P.
– Dan P.

2014-11-18 08:09:51 +00:00
Commented Nov 18, 2014 at 8:09 — Dan P.
– Dan P., Commented Nov 18, 2014 at 8:09
I compiled my comments into an answer, see below.

Yoshi
– Yoshi

2014-11-18 08:31:25 +00:00
Commented Nov 18, 2014 at 8:31 — Yoshi
– Yoshi, Commented Nov 18, 2014 at 8:31

Xtian · Accepted Answer · 2014-11-18 07:59:31Z

2

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

answered Nov 18, 2014 at 7:59

Xtian

4982 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan P. Over a year ago

What about the contactItemClick function ?

Xtian Over a year ago

Edited. Everything should be in a single controller. Also addressed the issue on the click event

Yoshi · Accepted Answer · 2014-11-18 09:58:33Z

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

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).
As you're using nested controllers, use controller as to make things clearer.
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>

Collectives™ on Stack Overflow

AngularJS ng-hide not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related