将html添加到UI bootsrap popover inside指令中

Question

我是一个有角度的初学者，我希望在我在指令中创建的popover中添加一个html按钮。具体来说，我的指令允许用户突出显示页面上的文本，然后弹出窗口将出现在所选文本周围。它适用于popover中的纯文本内容，但不适用于html。这是现在的指令

app.directive('replybox', function ($timeout, $window, $compile, $sce) {
    var linkFn = function (scope, element, attrs) {


        var exampleText= element.find('p');
        var btn = element.find('button');

        var windowSelection="";

        exampleText.bind("mouseup", function () {
            scope.sel = window.getSelection().toString();
            windowSelection=window.getSelection().getRangeAt(0);
            if(scope.sel.length>0) {      
                scope.showModal = true;
                scope.$apply();
            }
        });

        btn.bind("click", function () {
            range = windowSelection;
            var replaceText = range.toString();
            range.deleteContents();
            var div = document.createElement("div");
            scope.pophtml = $sce.trustAsHtml("<p>hello world</p> <button>x</button>");
            div.innerHTML = '<poper><a href="" popover-is-open=true uib-popover-html="pophtml">' + replaceText + '</a></poper>';
            var frag = document.createDocumentFragment(), child;
            while ((child = div.firstChild)) {
                frag.appendChild(child);
            }
            $compile(frag)(scope);
            range.insertNode(frag);
            scope.selection="None";
        });

    };
    return {
        link: linkFn,
        restrict: 'A',
        scope: {
            entities: '=',
            selection:'='
        },

        template: `<ng-transclude></ng-transclude>
                    <div class="modal fade in" style="display: block;" role="dialog" ng-show="showModal"> 
                        <div class="modal-dialog"> 
                            <div class="modal-content">
                                <div class="modal-body">
                                    {{sel}}
                                </div>  
                                <div class="radio">
                                    <div ng-repeat="x in entities">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="choice" ng-model="$parent.selection" ng-value = "x">
                                                    {{x}} 
                                            </label>
                                        </div>
                                    </div>
                                </div>   
                                <div class="modal-footer"> 
                                    <button type="button" class="btn btn-primary" ng-click="showModal=false">
                                        Ok
                                    </button> 
                                </div> 
                            </div> 
                        </div> 
                    </div>`,
        transclude: true
    };
});

不起作用的部分是这部分

scope.pophtml = $sce.trustAsHtml("<p>hello world</p> <button>x</button>");
div.innerHTML = '<poper><a href="" popover-is-open=true uib-popover-html="pophtml">' + replaceText + '</a></poper>';

我觉得上面两行有问题。