javascript - AngularJS ng-hide不起作用

标记看起来像：

<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看起来像：

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

可能有范围问题吗？不知道发生了什么。我还尝试将$ scope.popoverHide设置为false，只是测试但没有成功。

最佳答案

我不确定您在做什么，但是有一些事情可以使事情变得简单：


使用有效的html。 Angular直接操纵dom。因此无效的html可能导致难以调试的错误。


外部div可能应该是ul
div中的内部li可能有问题
最里面的ul（包含button）不是必需的（并且仅包含按钮也包含错误）。

使用嵌套控制器时，请使用controller as使其更清晰。
无需使用angular的click事件来阻止事件。




这是代码的完整版本：

(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>

关于javascript - AngularJS ng-hide不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26989111/