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:true到您的指令:

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

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

如果未指定scope:true,则每个指令都是从父作用域共享数据(在这种情况下,父作用域是控制器的作用域),这解释了为什么两个指令的行为都是链接的.

演示