Question

这是一个带有确认弹出的角度js指令代码几乎在所有其他浏览器中工作。如何解决这个问题在IE 8中工作。我不知道如何解决这个问题在Internet Explorer 8中。

AccountsApp.directive('confirm', function ($document, $parse) {
var definition = {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var message = attrs.confirm || "Are you sure?";
        var popup = angular.element('<div class="message tooltip tracking" style="z-index: 99; position: absolute; opacity: 1;"><div class="with-small-padding align-center" style="display: block;"><div class="mid-margin-bottom">' + message + '</div><cancel style="cursor:pointer;cursor:hand;" class="button mid-margin-right" type="button">Cancel</cancel><confirm class="button blue-gradient glossy" style="cursor:pointer;cursor:hand;" type="button">Confirm</confirm></div><span class="block-arrow bottom"><span></span></span></div>');
        var okCallback = $parse(attrs.okClick);
        var cancelCallback = $parse(attrs.cancelClick);

        $document.bind('click', function () {
            if (event.target == element[0]) {
                event.stopPropagation();
                return;
            }
            popup.remove();
        });

        element.bind('click', function () {
            var btnConfirm = popup.find('confirm');
            var btnCancel = popup.find("cancel");
            var body = angular.element($document[0].body);
            body.append(popup);

            var pHeight = popup.prop('offsetHeight');
            var pWidth = popup.prop('offsetWidth');

            var rect = this.getBoundingClientRect();

            popup.css({
                top: (rect.top - pHeight - 12) + 'px',
                left: (rect.left - (pWidth - this.clientWidth) / 2) + 'px'
            });

            btnCancel.bind('click', function () {
                scope.$apply(function () {
                    cancelCallback(scope);
                    popup.remove();
                });
            });

            btnConfirm.bind('click', function () {
                scope.$apply(function () {
                    okCallback(scope);
                    popup.remove();
                });
            });

            scope.$apply();
        });
    }
};

return definition;
});

这是指令如何被使用.Html代码

Answer 1

这对FireFox和IE10也不起作用。 Firefox抱怨

关于双光标声明：cursor:pointer;cursor:hand;
在event中缺少if (event.target == element[0]) {的声明。报告错误ReferenceError: event is not defined。

我在两个地方删除了cursor:hand;并更改了

        $document.bind('click', function () {
            if (event.target == element[0]) {

到

    $document.bind('click', function (event) {
        if (event.target == element[0]) {

所以FF和IE10吞噬了它并得到了与Chrome相同的响应。

将IE10切换为IE9行为：与Chrome，FF相同的响应

将IE10切换为IE8行为：不适用于v.1.0.7

将IE10切换为IE8行为：使用v.1.0.2：与Chrome，FF相同的响应

Answer 2

它的工作方式更好，找到了我所有的错误，感谢Jurkovic的帮助

AccountsApp.directive('developrConfirm', function ($document, $parse) {
var definition = {
    restrict: 'A',
    link: function (scope, element, attrs) {
        var message = attrs.developrConfirm || "Are you sure?";
        var popup = angular.element('<div class="message tooltip tracking" style="z-index: 99; position: absolute; opacity: 1;"></div>');


        var content = angular.element('<div class="with-small-padding align-center" style="display: block;"></div>');
        var lblmessage = angular.element('<div class="mid-margin-bottom">' + message + '</div>');
        var btnCancel = angular.element('<button class="button mid-margin-right" type="button">Cancel</button>');
        var btnConfirm = angular.element('<button class="button blue-gradient glossy" type="button">Confirm</button>');
        content.append(lblmessage);
        content.append(btnCancel);
        content.append(btnConfirm);
        var footer = angular.element('<span class="block-arrow bottom"><span></span></span>');
        popup.append(content);
        popup.append(footer);
        var okCallback = $parse(attrs.okClick);
        var cancelCallback = $parse(attrs.cancelClick);

        $document.bind('click', function (event) {
            if (event.target == element[0]) {
                alert('button clicked');
                //event.preventDefault();
            } else {
                alert('otherplace clicked');
                popup.remove();
            }
        });

        element.bind('click', function () {
            var body = angular.element($document[0].body);
            body.append(popup);

            var pHeight = popup.prop('offsetHeight');
            var pWidth = popup.prop('offsetWidth');

            var rect = this.getBoundingClientRect();

            popup.css({
                top: (rect.top - pHeight - 12) + 'px',
                left: (rect.left - (pWidth - this.clientWidth) / 2) + 'px'
            });

            btnCancel.bind('click', function () {
                scope.$apply(function () {
                    cancelCallback(scope);
                    popup.remove();
                });
            });

            btnConfirm.bind('click', function () {
                scope.$apply(function () {
                    okCallback(scope);
                    popup.remove();
                });
            });

            scope.$apply();
        });
    }
};

return definition;
});

为什么这个指令在Internet Explorer 8中不起作用。它没有任何错误就失败了

2 个答案: