自定义角度过滤器崩溃 IE 9+

Question

底部的更新 我编写了一个过滤器来管理我在 ng-repeat 中置换的内容。但是，当返回的数据应该是一个空数组时，在 IE 9+ 中我会崩溃，但在 FF 和 Chrome 中它可以正常工作。

下面的BuildFilter是从angular.module('app').filter(filterId, buildFilter);调用的

function buildFilter() {
    return function (input, limitTo, keyWords) {


        var outputPre = [];
        var outputPost = [];

        var d = new Date();
        console.log('filter event: '
            + d.getHours() + ":"
            + d.getMinutes() + ":"
            + d.getSeconds());

        var outputPre = [];
        if (!(limitTo === null
            || limitTo === undefined
            || limitTo === '')) {
            for (var i = 0; i < input.length; i++) {
                if (input[i] !== null && input[i] !== undefined) {
                    switch (limitTo) {
                        case 'edi':
                            if (input[i].dateReleased === null) {
                                outputPre.push(input[i]);
                            }
                            break;
                        case 'rel':
                            if (input[i].dateReleased !== null
                                && input[i].dateRetired === null) {
                                outputPre.push(input[i]);
                            }
                            break;
                        case 'ret':
                            if (input[i].dateRetired !== null) {
                                outputPre.push(input[i]);
                            }
                            break;
                        default:
                            outputPre.push(input[i]);
                    }
                }
            }
        }
        else {
            for (var i = 0; i < input.length; i++) {
                outputPre.push(input[i]);
            }
        }

        //Sanity Check Log Entry
        console.log('pre count: ' + outputPre.length);

        if (!(keyWords === null
            || keyWords === undefined
            || keyWords === '')) {
            var tkw = keyWords.toLocaleLowerCase();

            for (var i = 0; i < outputPre.length; i++) {

                var tn = outputPre[i].name.toLocaleLowerCase();

                if (tn.indexOf(tkw) > -1) {
                    outputPost.push(outputPre[i]);
                }
            }
        }
        else {
            for (var i = 0; i < outputPre.length; i++) {
                outputPost.push(outputPre[i]);
            }
        }

        //Sanity Check Log Entry
        console.log('post count: ' + outputPost.length);

        return outputPost;
    };
};

我的样本数据是：

var data= [ //for input
    {
        id: 0,
        dateCreated: '1/1/2014',
        dateReleased: null,
        dateRetired: null,
        name: 'Sample Data',
   },
   {
        id: 1,
        dateCreated: '1/1/2014',
        dateReleased: null,
        dateRetired: null,
        name: 'Other Sample Data',
    },
]

limitTo 支持以下值：'edi' 'rel', 'ret'

keyWords 只是任何字符串。它只是查看字符串的任何部分是否在名称字段中。

更新帖子： 将代码简化为以下内容。

function isEdi(obj) {
    if ((obj.dateReleased === null)
        && (obj.dateRetired === null)) {
        return true;
    }
    return false;
}

function isRel(obj) {
    if ((obj.dateReleased !== null)
        && (obj.dateRetired === null)) {
        return true;
    }
    return false;
}

function isRet(obj) {
    if ((obj.dateReleased !== null)
        && (obj.dateRetired !== null)) {
        return true;
    }
    return false;
}

function buildFilter() {
    return function (input, limitTo) {

        var output = [];

        switch (limitTo) {
            case 'edi':
                output = input.filter(isEdi);
                break;
            case 'rel':
                output = input.filter(isRel);
                break;
            case 'ret':
                output = input.filter(isRet);
                break;
            default:
                output = input;
        }

        return output;
    };
};

当返回为 [] 时 IE 崩溃，但如果返回至少 1 条记录，则工作正常。

2ns 更新发布：

将重复改为ng-repeat="obj in objlist | filter:getObJFilter(objFilter) | orderBy:['+dateRetired','+dateReleased','+name']">

objFilter是获取过滤器函数传递给过滤器的参数。这样我只是扩展了原生过滤器而不是创建一个新的过滤器。

所以我的控制器包含以下内容。

$scope.getFilter = function (val) {
    switch (val) {
        case 'edi':
            return isEdi();
            break;
        case 'rel':
            return isRel();
            break;
        case 'ret':
            return isRet();
            break;
        default:
            return function (obj) {return true };
   }
}

function isEdi() {
    return function(obj){
        if ((obj.dateReleased === null)
            && (obj.dateRetired === null)) {
            return true;
        }
        return false;
    }}

function isRel() {
    return function (obj) {
        if ((obj.dateReleased !== null)
            && (obj.dateRetired === null)) {
            return true;
        }
        return false;
    }
}

function isRet() {
    return function (obj) {
        if ((obj.dateReleased !== null)
            && (obj.dateRetired !== null)) {
            return true;
        }
        return false;
    }
}

我相信我已尽我所能消除过滤器的问题。所以我现在到了我认为在 IE 中呈现空集存在问题的地方。

今晚我将在 Plunkr 中发布一个完整的测试示例。

注意：我也在使用 AngularUI 和 Angular 作为 UI Bootstrap。获取所需指令的快捷方式。但是，我在其他问题上遇到了 UI Bootstrap 的问题，因此我将替换它们的一些组件以进一步隔离问题。

第 3 次更新我已删除所有第 3 方指令。我确实有 UI Bootstrap 来支持 TBS，所以我删除了它以节省我的理智。

Answer 1

放

<html xmlns:ng="http://angularjs.org">

或

 <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">

Follow this

Answer 2

这不是 Angular.js 的问题，而是 UI.Bootstrap 指令的问题。 由于我无法在 Plunker 中复制该问题，因此我开始查看其他指令。从 SPA 中消除了选项卡控件，并将其替换为我自己的基于 TBS 的自定义选项卡。问题消失了。

进一步调查表明，这可能是由 UI.Bootstrap 选项卡中的递归问题引起的。因此，我将记录我的发现，并发布到该 GitHub。

如果没有将代码发布到 Plunker 的简单建议，我不会找到这个，所以我再次成为 Angular 工作人员。

我的用户界面看起来像：

<tabset>
    <tab header="some header">
        <div ng-repeat="...">
            ...

所以 tabset 和 tab 指令在我的过滤器中的每一次更改都会被触发。所以我删除了 tabset 和 tab，只是用标准的 TBS 选项卡替换它们。