AngularJS 指令意外协同工作

Question

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

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

谁能告诉我一些解决方案

JSFIddle

Answer 1

只需在您的指令中添加 scope: {} Fiddle

Answer 2

因为directives都在同一个controller里。所以指令使用相同的范围。

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

在您的指令代码中：添加scope: {}

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

   }

DEMO

Answer 3

将 scope:true 添加到您的指令中：

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

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

如果您不指定 scope:true，那么每个指令都从父作用域共享数据（在这种情况下，父作用域是控制器的作用域），这解释了为什么两个指令的行为是相关联的。

Demo

AngularJS 指令意外协同工作

AngularJS directive working together unexpectly

javascript

angularjs

angularjs-directive