Question

Markup看起来像：

<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只是测试但没有成功。

Answer 1

使用示波器将其放在控制器内：

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

我不完全确定你在做什么，但有一些事情可以让事情变得更容易：

使用有效的HTML。 Angular直接操纵dom。因此，无效的html可能导致难以调试错误。
- 外div应该是ul
- div中的内部li可能会出现问题
- 最里面的ul（包含button）不是必需的（并且只包含按钮也是错误的。）
当您使用嵌套控制器时，请使用controller as使事情更加清晰。
无需使用有角度的点击事件阻止事件发生。

这是您的代码的清理版本：

＆＃13;

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

＆＃13;

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

＆＃13;

AngularJS ng-hide无效

2 个答案: