Javascript AngularJS指令意外地协同工作

我已经为一个下拉框创建了一个angularjs指令，该指令工作正常，但问题是，当我复制该指令时，这两个指令同时工作：打开、选择和关闭

<div ng-app='myApp' ng-controller="Controller">
    <drop-down></drop-down>
    <br> <br> <br> <br> <br> <br>
    <drop-down></drop-down>
</div>

谁能告诉我一些解决方法吗

---

只需在指令中添加

范围：{}

，这是因为两个

指令都在同一个
控制器中。因此，该指令使用相同的作用域

在这种情况下，必须使用隔离作用域为指令创建单独的作用域。或者必须使用不同的控制器包装多个指令

在指令代码中：添加
范围：{}

app.directive('dropDown', function ($parse, $document) {
    return {
        restrict: 'E',
        require: ['?ngModel'],
        scope: {},
        template: ...

   }

将
范围：true
添加到指令中：

app.directive('dropDown', function ($parse, $document) {
    return {
        restrict: 'E',
        scope:true,
        ...
    }
});

通过指定
scope:true
，每个指令将创建自己的子作用域，该子作用域继承自父作用域，并且不会相互影响

如果未指定
范围：true
，则每个指令都共享来自父范围的数据（在本例中，父范围是控制器的范围），这解释了为什么两个指令的行为都是链接的

两人使用相同的范围。在这种情况下，您必须使用独立作用域。请在此处发布您的代码。今天，我与我的团队负责人讨论了您昨天创建的引导下拉列表，但他说的是，因为我们使用的是使用自己css的客户机框架，我们不能使用将覆盖许多组件的引导。他要求我解决我创建的组件的问题，我已经为此创建了一个单独的SO。你能帮我一下吗