Javascript Bootstrap popover与textAngular editor结合会导致奇怪的错误

Javascript Bootstrap popover与textAngular editor结合会导致奇怪的错误,javascript,angularjs,twitter-bootstrap,google-chrome,safari,Javascript,Angularjs,Twitter Bootstrap,Google Chrome,Safari,我已经编写了一个自定义工具,用于上传编辑器中链接的文件。我已经将我的代码定向到原始代码上。 单击“文件上载”按钮时,将打开一个引导弹出窗口,您可以上载文件,并可以使用按钮确认以插入链接或链接所选内容。 问题是:这只会在每秒钟起作用!如果我在Firefox Safari和Chrome中运行的代码不起作用,问题就不会出现,其他浏览器也没有经过测试。如果我漏掉了爆米花,也不会发生这种情况。 我试了很多次,但都没发现问题出在哪里。这似乎是一些与引导弹出框、Chrome/Safari和textAngula

我已经编写了一个自定义工具,用于上传编辑器中链接的文件。我已经将我的代码定向到原始代码上。 单击“文件上载”按钮时,将打开一个引导弹出窗口,您可以上载文件,并可以使用按钮确认以插入链接或链接所选内容。 问题是:这只会在每秒钟起作用!如果我在Firefox Safari和Chrome中运行的代码不起作用,问题就不会出现,其他浏览器也没有经过测试。如果我漏掉了爆米花,也不会发生这种情况。 我试了很多次,但都没发现问题出在哪里。这似乎是一些与引导弹出框、Chrome/Safari和textAngular相结合的问题。 下面是一个有注释的plunker,它显示了我的问题:

//stackoverflow说,我必须通过代码附带指向plunker的链接,所以这里是我问题的核心。我建议改为在plunker中查看代码

taRegisterTool('fileupload', {
    tooltiptext: 'Upload a file to link to',
    iconclass: 'fa fa-upload',
    action: function () {

        //get editors fileupload button
        var button = $('[name="fileupload"]');

        //create popover content
        var popoverContent = angular.element('<ta-fileupload-popover></ta-fileupload-popover>');

        // the editor fileupload button scope acts as interface between the popover directive and the editor
        // (i don't really like this - is there a better way to let them communicate?)
        var $buttonScope = button.scope();

        //compile content it to the buttons scope
        $compile(popoverContent)($buttonScope);

        //create bootstrap popover
        button.popover({
            content: popoverContent,
            placement: 'bottom',
            container: 'body',
            viewport: button,
            html: true
        });

        //show it
        button.popover('show');

        //..for reference inside performAction function
        var self = this;

        //taFileuploadPopover calls this after finishing the upload
        $buttonScope.performAction = function () {

            //the path where the uploaded file will be
            var urlLink = $buttonScope.taFileUploadAccessPath;

            //wrap selection like in original textangular insertLink tool
            if (urlLink && urlLink !== '' && urlLink !== 'http://') {

                //destroy popover
                button.popover('destroy');

                //urlLink is always correctly defined..
                console.log(urlLink)

                //TODO ..but the wrapping/link insertion only works every second time!!!!!!
                return self.$editor().wrapSelection('createLink', urlLink, true);
            }
        };
    }
});

我刚刚发现了错误的原因:当我点击上传按钮时,编辑器文本区域失去了焦点。这在某种程度上混淆了rangy文本选择逻辑并产生了错误。这也解释了为什么Firefox中没有出现错误,因为浏览器处理聚焦事件的方式不同。我在按钮中添加了一个ng mousedown=$event.stopPropagation,现在所有浏览器都可以正常工作