Javascript 不同组件中使用的Angularjs 1.x自定义指令具有相同的值

我不熟悉Angular 1.x。我被分配了一个要解决的bug。他们创建了一个自定义下拉列表作为指令。它在两个单独的组件中调用。在一个组件中调用指令时，它会将该组件所做的更改更新为第二个组件中可用的下拉指令。这就像，无论先调用哪个组件，该组件的下拉行为都将使用该下拉指令复制到所有其他组件。 以下是该指令的代码：

    app.directive('searchableDropdown', () => {
    return{
        restrict : 'E',
        transclude : true,
        scope: {
            dropdownList: '=',
            keyName: '@',
            dropdownId :'=',
            onChangeCall: '&',
            isRequired: '@',
            isClearSearch:'=',
            clearFlag:'=',
            clearClass:'@'
        },
        link: (scope) => {
            scope.$watch('dropdownList', function(newValue, oldValue){
                document.getElementById('searchableDropdownID').focus();
                if(oldValue.length >0 && newValue && scope.clearFlag){
                    scope.search = null;
                }else if(oldValue.length == 0 && newValue.length ==0){
                    scope.search = null;
                }
            }, true);
            scope.delayedCall = null;
            scope.delayingCall = (search) => {
                if(search.delayedCall){
                    clearTimeout(scope.delayedCall);
                }
                scope.delayedCall=setTimeout(function(){
                    scope.onChangeCall(search)
                }, 1000);
                scope.clear=()=>{
                    if(scope.search){
                        scope.search = null;
                        scope.onChangeCall(null);
                    }
                }
            }

        },
        template : `<input id="searchableDropdownID" class="form-control" autocomplete="off" type="text" placeholder="Search" data-ng-model="search" list=dropdownId data-ng-change="delayingCall({search})" ng-required = "isRequired">
        <div ng-if="isClearSearch" class="{{clearSearch}}">
            <span title="Clear" class="date-close-icon" ng-click="clear()"></span>
        </div>
        <datalist id=dropdownId style="display:none" style="display:none">
            <option data-ng-repeat="option in dropdownList | orderBy : keyName" value="{{option[keyName]}}"></option>
        </datalist>`
    }
})
        

app.directive（'searchableDropdown'，（）=>{
返回{
限制：'E'，
是的，
范围：{
dropdownList:“=”，
关键字名称：'@'，
dropdownId:“=”，
onChangeCall:“&”，
要求：“@”，
isClearSearch:“=”，
clearFlag:“=”，
clearClass:“@”
},
链接：（范围）=>{
范围.$watch（'dropdownList'，函数（newValue，oldValue）{
document.getElementById（'searchableDropdownID'）.focus（）；
if（oldValue.length>0&&newValue&&scope.clearFlag）{
scope.search=null；
}else if（oldValue.length==0&&newValue.length==0）{
scope.search=null；
}
}，对）；
scope.delayedCall=null；
scope.delayingCall=（搜索）=>{
if（search.delayedCall）{
clearTimeout（scope.delayedCall）；
}
scope.delayedCall=setTimeout（函数（）{
scope.onChangeCall（搜索）
}, 1000);
scope.clear=（）=>{
if（scope.search）{
scope.search=null；
scope.onChangeCall（null）；
}
}
}
},
模板：`
`
}
})

您能就指令代码中的更改或问题提出建议吗？

---

另外，请提前感谢。

一个问题是ID不能在页面中重复。我猜所有指令实例都共享相同的父作用域。如果看不到演示问题的演示，很难提供帮助