为md-menu编写一个模板，从页面右侧不同的位置打开它

Question

我有一个菜单  

我想从页面上的不同位置打开此菜单，例如

我想要的： 每次单击灰色背景div上的加号或两个视频之间的行时，菜单都会弹出正确的位置，但菜单应该只在HTML上写一次模板，就像我想的那样。

            <md-menu class="add-video">
         <!-- Trigger element is a md-button with an icon -->
         <md-button ng-click="$mdMenu.open($event)" class="md-icon-button" aria-label="Open sample menu">
           <md-icon md-font-icon="icon-home" class="icon vi-o2-1"></md-icon>
         </md-button>
         <md-menu-content>
           <md-menu-item>
             <md-button ng-click="$ctrl.doSomething()"><span class="icon vi-o2-1"></span>Add Videos</md-button>
           </md-menu-item>
           <md-menu-item>
             <md-button ng-click="$ctrl.doSomething()"><span class="icon vi-o2-1"></span>Semantic</md-button>
           </md-menu-item>
           <md-menu-item>
             <md-button ng-click="$ctrl.doSomething()"><span class="icon vi-o2-1"></span>Personalized</md-button>
           </md-menu-item>
           <md-menu-item>
             <md-button ng-click="$ctrl.doSomething()"><span class="icon vi-o2-1"></span>Nested Playlists</md-button>
           </md-menu-item>
         </md-menu-content>
        </md-menu>