angularjs - Angular Directive 在模板中显示和隐藏 div

Question

我创建了一个用于属性的指令，特别是按钮或锚点。

单击按钮时，我在按钮后附加了一个模板（包含一个 div）。如果再次单击按钮（或按钮/菜单之外，即正文），我想隐藏模板中包含的 div。

到目前为止，我有以下内容，但我无法让 isVisible 更新和隐藏 div（菜单）

主要指令代码：

return {
        restrict: 'A',
        scope: {
        },
        link: function (scope, element, attr) {
            scope.isVisible = false;

            element.bind('click', function () {

                var menu = element.parent().find('.actionMenuDir');

                if (menu.length === 0) {

                    $templateRequest('app/directives/popupmenu/actionpopup.html').then(function(html) {
                        var template = angular.element(html);
                        element.after(template);
                        $compile(template)(scope);
                    });

                } else {
                    scope.isVisible = !scope.isVisible;
                }

                $compile(menu)(scope);

            });

        }

    }

模板标记：

<div class="actionMenuDir" ng-if="isVisible">
{{isVisible}}
<ul>
    <li>Menu Yo</li>
</ul>

使用指令的按钮标记：

<button popup-menu type="button">BUTTON</button>