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

将其放置在 Controller 内，其范围为:

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