Angular ng-click 功能需要点击两次才能生效

Question

我有以下指令

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
    };
});

所以模板中有一个模式，其中包含一个 "Ok" 和一个 "Cancel" 按钮。这些按钮上有一个 ng-click，可将 scope.okOrCancel 设置为适当的值。 btn 绑定到按钮单击并根据 scope.okOrCancel 的状态执行不同的操作。单击 "Ok" 按钮时，一切正常。但是 "Cancel" 按钮需要点击两次才能使模态消失。我认为这会在

内立即发生

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

谁能告诉我为什么取消按钮需要点击两次才能关闭模式？

Answer 1

目前，您可以混合使用 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';

希望对您有所帮助！

干杯

Answer 2

完全同意varit05的回答。很可能是因为您没有在点击事件处理程序中触发摘要循环。但无论如何，重点是：混合 jquery 和 angular 东西不是一个好主意，除非： a) 你绝对确定这是必要的； b) 你非常清楚自己在做什么以及为什么这样做；否则会导致这样意想不到的后果。

又是一个小小的补充。另一个问题在这里：

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

正确的方法实际上是将新节点插入到真正的 DOM 中，然后才 $compile() 它们。否则，插入 DOM 中带有 require: "^something" 的任何指令将无法编译，因为它们无法在上层节点中找到必要的控制器，直到新节点实际到达 "main" DOM树。当然，如果你绝对确定你没有那个，那么你可以保持原样，它会工作......但是问题只会在那里等待它 "finest hour".

Angular ng-click 功能需要点击两次才能生效

Angular ng-click function requiring two clicks to take effect

angularjs

angular-ui-bootstrap