AngularJS自定義指令孤立示波器模型綁定

我試圖實現一個雙選擇列表表單組件，只是爲了嘗試角度和嘗試更好地理解它。AngularJS自定義指令孤立示波器模型綁定

此指令的功能是父模型包含可供選擇的項目列表，並且包含選擇項目放置的目標列表（選定）。當選擇一個項目時，它將從可用數組中移除並放入選定數組中。

由於表單可能需要多個這樣的雙重選擇列表組件，我不想依賴硬編碼的屬性名稱，而是允許列表傳入以進行雙向數據綁定。

下面是代碼的JSBin：

我沒有比剛剛嘗試通過在模型屬性名傳遞給數據綁定到列表不見了任何進一步。

在該指令上，定義了以下範圍屬性。 availableItems和selectedItem應該都綁定到父控制器屬性。突出顯示的可用和突出顯示的已選擇用於在點擊按鈕之前存儲用戶選擇。

scope: { 
     availableItems: '=', 
     selectedItems: '=', 
     highlightedAvailable: [], 
     highlightedSelected: [] 
    },

有人可以告訴我爲什麼控制器屬性永遠不會綁定到指令屬性？

謝謝！

2014-05-04 Peter

首先，你有一個錯誤被你的範圍造成的：

scope: { 
    availableItems: '=', 
    selectedItems: '=', 
    highlightedAvailable: [], 
    highlightedSelected: [] 
},

應該是：

scope: { 
    availableItems: '=', 
    selectedItems: '=' 
},

聲明數組其他地方，例如在鏈接功能：

link: function (scope, element, attrs) { 
     scope.highlightedAvailable = []; 
     scope.highlightedSelected = [];

接下來的問題是你指定屬性的方式，你有：

<div ng-Select-Lists availableItems='availableItems' selectedItems='selectedItems'>

試試這個：

<div ng-Select-Lists available-items='availableItems' selected-items='selectedItems'>

2014-05-04 22:52:05 aet

謝謝，我現在看到控制檯將數組記錄出來，只是爲了明白答案，除了我現在明白的突出的XYZ屬性問題之外。綁定問題是連字符的屬性名稱。這是一個對角度系統性的規則嗎？如果我給財產一個較低的駱駝案件名稱，它會尋找連字符較低的駱駝案件呢？ – Peter

是的，我無法在第二秒找到它，但是在角色文檔中有一節介紹了這一點。好的，這裏是：https://docs.angularjs.org/guide/directive在他們討論的屬性命名和它們用於名稱轉換的算法頂部附近。 – aet

完美的謝謝你發現，對我而言，我只是想了解幕後發生的事情，而不是僅僅接受它。我將通讀一遍，然後轉到獲取模板內部綁定的工作。謝謝！ – Peter

要在加時賽的回答擴大，您所指定的指令的方式在你的HTML屬性沒有工作的原因是因爲HTML不區分大小寫。所以'availableItems'屬性實際上被作爲'availableitems'傳遞給你的指令範圍。另一方面，像'可用項目'這樣的蛇類詞彙將在角碼中轉化爲駱駝案例。

這就是你在html中以'ng-repeat'，'ng-model'等的方式編寫角度指令的原因，但是在角度源代碼中，你會看到這些指令名稱：'ngRepeat' ，'ngModel'...

要超級小心地在HTML中使用蛇案，並在Javascript中使用駱駝案例（Angular）！我對這種混亂造成的一些錯誤花了太長時間。

2014-05-05 05:01:25 skeller88

回答