Question

我刚刚实现了ag-grid，但发现当使用带有角度编译模板的cellTemplates时IE9崩溃。

你们有没有遇到过这种情况并且可能找到了解决方法？

如何重现：

使用IE浏览此处（http://www.ag-grid.com/angular-grid-cell-template/index.php），并从DevTools中选择IE9。

由于角度编译模板，它会崩溃。不知道我能做些什么。

（我还在GitHub上打开了一个问题：https://github.com/ceolter/ag-grid/issues/521）

编辑：

调试它，有一个无限循环，因为从一个方法更新数组，不知道另一个方法......

无限循环是： getTemplate，（等待直到调用结束），调用结束，模板添加到缓存，运行回调，回调没有看到templateCache中的模板，创建另一个回调，将其添加到队列，依此类推。（来自ag-grid的代码）。

// returns the template if it is loaded, or null if it is not loaded
        // but will call the callback when it is loaded
        TemplateService.prototype.getTemplate = function (url, callback) {
            var templateFromCache = this.templateCache[url];
            if (templateFromCache) {
                return templateFromCache;
            }
            var callbackList = this.waitingCallbacks[url];
            var that = this;
            if (!callbackList) {
                // first time this was called, so need a new list for callbacks
                callbackList = [];
                this.waitingCallbacks[url] = callbackList;
                // and also need to do the http request
                var client = new XMLHttpRequest();
                client.onload = function () {
                    that.handleHttpResult(this, url);
                };
                client.open("GET", url);
                client.send();
            }
            // add this callback
            if (callback) {
                callbackList.push(callback);
            }
            // caller needs to wait for template to load, so return null
            return null;
        };
        TemplateService.prototype.handleHttpResult = function (httpResult, url) {
            if (httpResult.status !== 200 || httpResult.response === null) {
                console.warn('Unable to get template error ' + httpResult.status + ' - ' + url);
                return;
            }
            // response success, so process it
            this.templateCache[url] = httpResult.response;
            // inform all listeners that this is now in the cache
            var callbacks = this.waitingCallbacks[url];
            for (var i = 0; i < callbacks.length; i++) {
                var callback = callbacks[i];
                // we could pass the callback the response, however we know the client of this code
                // is the cell renderer, and it passes the 'cellRefresh' method in as the callback
                // which doesn't take any parameters.
                callback();
            }
            if (this.$scope) {
                var that = this;
                setTimeout(function () {
                    that.$scope.$apply();
                }, 0);
            }
        };
        return TemplateService;
    })();

Answer 1

我最终发现了这个问题。在IE9中，模板位于响应内的responseText上。在IE10 +和所有其他浏览器中它都会响应。

所以为了解决它，在上面的代码中，而不是：

.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 1px solid #2E8DEF; border-radius: 0px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 26px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.onoffswitch-inner:before {
    content: "";
    padding-left: 10px;
    background-color: #FFFFFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "";
    padding-right: 10px;
    background-color: #FFFFFF; color: #333333;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 45px; margin: 0px;
    background: #2E8DEF;
    position: absolute; top: 0; bottom: 0;

    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}

我补充说：

     // response success, so process it
     this.templateCache[url] = httpResult.response;

供将来参考，请在此处添加答案。和Angular没什么关系。：）

更新： https://github.com/ceolter/ag-grid/issues/521

代码进入了回购:) 谢谢Niall Crosby（ceolter）。

在IE9中{ag-grid + templateUrl崩溃

1 个答案: