Angularjs 需要两次单击才能生效的角度单击功能

我有以下指示

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="";

        scope.okOrCancel="None";

        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 () {

            if(scope.okOrCancel=='ok'){
                range = windowSelection;
                var replaceText = range.toString();
                range.deleteContents();
                var div = document.createElement("div");
                div.innerHTML = '<poper><a href=""  popover-trigger="mouseenter" uib-popover="'+scope.selection+'">' + replaceText + '</a><button type="button" class="btn btn-danger btn-xs">&times;</button></poper>';
                var frag = document.createDocumentFragment(), child;
                while ((child = div.firstChild)) {
                    frag.appendChild(child);
                }
                $compile(frag)(scope);
                range.insertNode(frag);
                scope.showModal=false;
            } 

            if(scope.okOrCancel=='cancel'){
                scope.showModal=false;
            }

            scope.selection="None";
            scope.okOrCancel='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="okOrCancel='ok'">
                                        Ok
                                    </button> 
                                    <button type="button" class="btn btn-primary" ng-click="okOrCancel='cancel'">
                                        Cancel
                                    </button> 
                                </div> 
                            </div> 
                        </div> 
                    </div>`,
        transclude: true
    };
});

---

有人能告诉我为什么取消按钮需要两次单击才能关闭模式吗？

目前，您的确定和取消单击混合使用jQuery和angularjs。也许这就是需要两次点击才能生效的原因

如果我是你，我会这样写：

模板：

<div class="modal-footer"> 
    <button type="button" class="btn btn-primary" ng-click="okClick()"> Ok </button>
    <button type="button" class="btn btn-primary" ng-click="cancelClick()"> Cancel </button>
</div>

好啊
取消

在JS中：

scope.okClick = function() {
    range = windowSelection;
    var replaceText = range.toString();
    range.deleteContents();
    var div = document.createElement("div");
    div.innerHTML = '<poper><a href=""  popover-trigger="mouseenter" uib-popover="'+scope.selection+'">' + replaceText + '</a><button type="button" class="btn btn-danger btn-xs">&times;</button></poper>';
    var frag = document.createDocumentFragment(), child;
        while ((child = div.firstChild)) {
            frag.appendChild(child);
        }
    $compile(frag)(scope);
    range.insertNode(frag);
    scope.showModal=false;
} 

scope.cancelClick = function() {
    scope.showModal=false;
}

scope.selection="None";
scope.okOrCancel='None';

scope.ok单击=函数（）{
范围=窗口选择；
var replaceText=range.toString（）；
range.deleteContents（）；
var div=document.createElement（“div”）；
div.innerHTML='×；'；
var frag=document.createDocumentFragment（），子级；
while（（child=div.firstChild））{
附肢儿童（child）；
}
$frag（范围）；
range.insertNode（frag）；
scope.showmodel=false；
} 
scope.cancelClick=函数（）{
scope.showmodel=false；
}
scope.selection=“无”；
scope.okOrCancel='None'；

我希望这对你有帮助

干杯

完全同意他的回答。很可能是因为您没有在click事件处理程序中触发摘要循环。但无论如何，关键是：把jquery和angular混合在一起不是一个好主意，除非：a）你绝对肯定这是必要的；b） 你很清楚你在做什么，为什么；否则会导致这样意想不到的后果

只是另一个小小的补充。另一个问题是：

$compile(frag)(scope);
range.insertNode(frag);

---

正确的方法实际上是将新节点插入到真正的DOM中，然后$compile（）将它们插入。否则，任何带有

的指令都将无法编译插入的DOM中的“^something”

，因为在新节点实际到达“main”DOM树之前，它们无法在上层节点中找到必要的控制器。当然，如果你绝对确定你没有，那么你可以让它保持原样，它会起作用。。。但问题只会在那里等待“最佳时刻”。

你能补充一下我应该如何将其更改为正确的方法吗？Thanks@user1893354本质上，您需要这样做：

range.insertNode（frag）$编制（frag）（范围），即更改其顺序。然而，这种方法还有另一个问题：在将文档片段插入DOM之后，它的内容将不再在docfrag对象中可用。因此，在执行
range.insertNode（frag）之后框架中没有任何可编译的内容。您需要使用range对象或通过其他方式直接在DOM中查找该内容。我只是对getSelection（）及其返回的对象没有太多的处理，因此无法帮助处理这个特定的问题。这很有效，但我必须将
cancelClick（）
部分更改为
scope.cancelClick=function（）{scope.showModal=false；}
哦，是的。。我有点想念这个。谢谢我会更新答案：）很高兴它能帮助你。
$compile(frag)(scope);
range.insertNode(frag);