如何在外部单击时隐藏行弹出窗口

Question

我有一个网格。网格上的每一行都有一个按钮。单击该按钮时，将切换div外观。我正在应用ng-if来显示div。

我所做的

查看

cellTemplate:
    '<div style="position:absolute;">' +
        '<span ng-class="{ \'contact-grid-note\': row.entity.notes != null , \'contact-grid-note-disabled\': row.entity.notes == null }" ng-click="grid.appScope.toggleNote(row.entity)">' +
        '</span>' +
        '<div class="contact-note-container" ng-if="row.entity.showNote" id="info">' +
            '<div class="contact-note-header">' +
                '<div class="contact-note-time">22/07/2020 18:23</div>' +
                '<div class="contact-note-where">Test</div>' +
            '</div>' +
            '<div class="contact-note-content">{{row.entity.notes}}</div>' +
        '</div>' +
    '</div>',

JavaScript

vm.toggledContact = null
vm.toggleNote = function (contact) {
    if (contact.notes) {
        if (vm.toggledContact) {
            vm.toggledContact.showNote = false;
            vm.toggledContact = null;
        }


        vm.toggledContact = contact;
        vm.toggledContact.showNote = true;
        vm.toggledContact.isInitial = true;
    }
}

$(document).click(function (e) {

    // check that your clicked
    // element has no id=info
    // and is not child of info
    if (e.target.id != 'info' && !$('#info').find(e.target).length && vm.toggledContact && vm.toggledContact.showNote && !vm.toggledContact.isInitial) {
        vm.toggledContact.showNote = false;
        vm.toggledContact = null;
        $scope.$apply();
    }
    else if (vm.toggledContact && vm.toggledContact.isInitial) {
        vm.toggledContact.isInitial = false;
    }
});

这段代码可以工作，但是我觉得它不是很干净。我想知道是否有更好的方法可以消除来自外部点击的div。