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

问题描述

我是Angular 1.x的新手。我分配了一个错误来解决。他们创建了一个自定义下拉列表作为指令。它被称为两个单独的组件。当在一个组件中调用指令时，它将由该组件进行的更改更新为第二个组件中可用的下拉指令。就像首先调用哪个组件一样，该组件的下拉行为将使用该dropdown指令复制到所有其他组件。以下是该指令的代码：

    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>`
    }
})

能否请您对指令代码中的更改或问题提出建议？另外，谢谢你。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularjs-directive javascript