AngularJS指令一起工作，意想不到的

我创立了一个下拉框的angularjs指令，该指令工作正常，但问题是，当我复制指令，然后两者同时工作时打开，选择和关闭AngularJS指令一起工作，意想不到的

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

谁能告诉我，这

JSFIddle

来源

2015-04-02 Alex Man

[https://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive](https://docs.angularjs.org/guide/directive#隔离范围指令） – zeroflagL 2015-04-02 09:37:49

两者都使用相同的范围。在这种情况下，您必须使用隔离范围 – mohamedrias 2015-04-02 09:38:03

请在此处发布您的代码*。 – deceze 2015-04-02 09:38:07

添加scope:true到您的指令：

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

通过指定scope: true，每条指令将创建自己的子作用域继承从父范围开始，不会互相影响。

如果您没有指定scope:true，那么每条指令都是从父范围共享数据（在这种情况下，父范围是控制器的范围），这就解释了为什么两个指令的行为都是链接的。

Demo

来源

2015-04-02 09:41:21 pixelbits

可以请你来http://chat.stackoverflow.com/rooms/63378/angularjs – 2015-04-02 09:53:45

今天我已经与我的团队领导讨论你的昨天创建的bootstrap下拉列表，但他所说的是因为我们使用的是使用自己的CSS的客户端框架，所以我们不能使用会覆盖很多组件的引导程序。他让我解决了我创建的组件的问题，我为此创建了一个单独的SO，在http://stackoverflow.com/questions/29426932/angularjs-function-in-parent-directive-not-getting-called - 从-transcluded-HTML。你能帮我解决这个问题吗？ – 2015-04-03 06:05:28

一些解决方案只是在你的指令添加

来源

2015-04-02 09:38:35 Shaxrillo

这是因为两个directives都在相同的controller。因此该指令使用相同的范围。

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

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

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

    }

DEMO

来源

2015-04-02 09:39:44 mohamedrias

AngularJS指令一起工作，意想不到的

回答

相关问题