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

Question

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

单击按钮后，我会在按钮后附加一个模板（包含div）。如果再次单击按钮（或按钮/菜单外部，即主体），我想隐藏模板中包含的div。

到目前为止我有以下内容，但我无法更新和隐藏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>