Question

我已经在AngularJS中编写了一个过滤器，当它在输入选择上使用ng-options时工作正常。由于我需要一个功能更强大的选择框，我已经写了一个指令。

该指令具有独立的范围，已过滤的选项通过双向绑定传递。不幸的是，我的过滤器会产生＆＃34; 10 $ digest（）迭代次数达到＆＃34; -error。

这是我的过滤器：

angularAMD.filter('gasUsableInSpacer', function(){
            return function(gasTypes, isSealed) {

                var filtered = [];

                angular.forEach(gasTypes, function(gasType){
                    if(isSealed){
                        if(gasType.usableInSealedSpacer)
                            filtered.push(gasType);
                    }
                    if(!isSealed){
                        if(gasType.usableInSecondarySpacer)
                            filtered.push(gasType);
                    }
                });
                return filtered;
            };
        });

这就是我包含我的指令的方式：

<filter-select options="allGasTypes | gasUsableInSpacer:element.sealed" element="element.gasType" id="gasTypeX"></filter-select>

上述方式不起作用，但这很好用：

<select class="form-control" ng-model="element.gasType" ng-options="gasType as gasType.naturalName for gasType in allGasTypes | gasUsableInSpacer:element.sealed track by gasType.id" name="gasTypeX" id="gasTypeX">
</select>

这是我的指令控制器：

angularAMD.directive("filterSelect", function (angularLoad) {
            return {
                templateUrl: 'rmlModMainApp/directives/filterSelect.html',
                restrict: 'E',
                scope: {
                    options : '=',
                    element: '='
                },
                link: function(scope, element, attr) {

                    angularLoad.loadCSS(requirejs.toUrl('rmlModMainApp/directives/filterSelect.css'));
                    scope.listVisible = false;

                    scope.selectOption = function(option){
                        scope.element = option;
                        scope.toggleList();
                    };

                    scope.toggleList = function(){
                        scope.listVisible = !scope.listVisible;
                    }
                }
            }
        });
    });

应该呈现选项的视图部分：

<div class="filterSelect">
    <div class="filterSelectContent" ng-show="listVisible">
        <form class="filterSelectSearch">
            <div class="input-group col-xs-12">
                <input type="text" class="form-control" id="filterText" ng-model="search.text" placeholder="filter" ng-model-options="{debounce: {'default':500, 'blur':0}}">
                <span class="input-group-addon"><i class="fa fa-lg fa-filter"></i></span>
            </div>
        </form>
        <div class="filterSelectList">
            <ul>
                <li ng-repeat="option in options track by option.id" ng-click="selectOption(option)">{{option.x}} <span ng-if="option.y">({{option.y}}mm)</span> [{{option.z}}] </li>
            </ul>
        </div>
    </div>
</div>

我不知道我做错了什么。

AngularJS过滤无限循环

0 个答案: