AngularJS ng-hide不起作用

Question

標記看起來像：

<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

我不確定您在做什么，但是有一些事情可以使事情變得簡單：

1. 使用有效的html。 Angular直接操縱dom。 因此無效的html可能導致難以調試的錯誤。

   • 外部div可能應該是ul
   • li的內部div可能有問題
   • 不需要最里面的ul （包含button ）（並且僅包含button也是一個錯誤）。

2. 當您使用嵌套控制器時，請使用controller as使事情更清楚。

3. 無需使用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>