无法使用自定义模板创建弹出窗口

Question

首先我尝试使用angular-ui

<span popover-template="removePopover.html" popover-title="Remove?" class="glyphicon glyphicon-remove cursor-select"></span>

此处未包含模板，并且控制台中未提供任何错误。由于我从previous questions感到不满，这个功能仍处于开发阶段（使用v0.13.0）。

然后我尝试使用bootstrap的popover

<span delete-popover row-index={{$index}} data-placement="left" class="glyphicon glyphicon-remove cursor-select"></span>

这包含在popover

中

<div id="removePopover" style="display: none">
        <button id="remove" type="button" ng-click="removeElement()" class="btn btn-danger">Remove</button>
        <button type="button" ng-click="cancelElement()" class="btn btn-warning">Cancel</button>
    </div>

这是管理指令

app.directive('deletePopover', function(){
  return{
    link: function(scope, element, attrs) {
        $(element).popover({
            html : true,
            container : element,
            content: function() {
                return $('#removePopover').html();
            }
        });
    scope.removeElement = function(){
        console.log("remove"); //does not get here
    }
    scope.cancelElement = function(){
        console.log("cancel"); //does not get here
    }
    }
  };
});

如果是bootstrap的popover，则范围搞乱了。 cancelElement()调用不会在父指令中到达指令。

如果有人能帮我理解这些工作，那就太棒了。