同时打开共享相同指令的2个下拉列表

Posted 2021-05-04

我有一个名为X的angularjs下拉指令，当我开始在输入字段上输入时，它会打开并显示相关项。我的页面中有两个X指令，它们具有相同的控制器和模板（即相同的指令但不同的隔离范围）。

第一个指令显示行星列表，第二个指示显示正在键入的行星中的矿物列表。当我开始输入输入时，我想打开两个动态显示相关数据的指令。但由于他们共享相同的模板，我不知道如何打开第二个指令的下拉列表。

模板中只有一个ng-repeat，但是有两个不同范围的2个列表。我只想知道理解这一点的方法。谢谢。

答案

这里的指令将监听inpVal并更新指令中的列表（你需要将inpVal传递给指令）。

.directive("myCustomSelect", function(){
    return {
        restrict: "AE",
        scope: {
            inpVal: "="
        },
        link: function(scope, ele, attrs){

            var _list = [];

            scope.list = _list;

            var _watch = scope.$watch("inpVal", function(n){
                if(n){
                    updateList();
                }
            });

            scope.$on("$destroy", function(){
                _watch();
            });

            function updateList(){
                var enteredVal = scope.inpVal;

                //_.filter is underscore js
                scope.list = _.filter(_list, function(v){
                    return enteredVal == v.name?true:false; 
                });                
            }            

        },
        template: "<select ng-options="l.name as l for l in list"></select>"
    }
})