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指令一起工作，意想不到的

回答

相關問題