通過代碼

Question

建立一個可重用的AngularJS指令與雙向數據綁定設置我試圖構建一個可重用的指令，顯示一個對話框，當一個按鈕被點擊並允許用戶自定義一個字符串數組。我在單用途情況下可以正常工作，但我試圖弄清楚是否可以通過代碼創建雙向數據綁定，以便我可以多次使用此指令的單個實例與不同的數組的字符串。

以我HTML，我有指令（注意缺乏結合到特定陣列）：

<my-array-dialog control='arrayDialog'></my-array-dialog>

我暴露的共享控制對象上有一個ShowDialog方法使所述對話框顯示。這種模式的一個例子是：http://plnkr.co/edit/MqN9yS8R5dnqTfjqldwX?p=preview

我想要做的是雙向數據綁定與父控制器傳入數據到我的showDialog方法。我不確定如何配置它，或者即使它是可能的。

在我的指導，我有以下幾點：

$scope.control = { 
    showDialog: function (arrayData) { 
     // Ideally, this would create two-way data binding 
     $scope.arrayData = arrayData; 
     // Manipulate the DOM here to show the dialog 
    } 
} 

理想的情況下，以$scope.arrayData變化將在調用代碼的arrayData得到體現。同樣，我沒有把它設置爲屬性的原因是因爲我想用不同的數據多次調用這個對話框並避免有多個對話框指令實例。

是否有可能以這種方式設置雙向數據綁定，還是我在談論這一切都是錯誤的？

Answer 1

絕對！查看$compile上令人生畏但卻非常有用的AngularJS文檔頁面。特別是，你想要做的是在父指令的變量和局部範圍內的變量之間創建一個雙向綁定。

定義指令時，可以指定一個作用域對象。您需要創建一個隔離範圍（用於可重用性），並使用@功能創建具有HTML屬性的雙向綁定。

從$編譯文檔：

=或= ATTR - 建立本地範圍屬性，並經由ATTR屬性的值定義的名稱的父範圍屬性之間的雙向綁定。如果未指定attr名稱，則假定屬性名稱與本地名稱相同。給定範圍的小部件定義：{localModel：'= myAttr'}，那麼小部件範圍屬性localModel將反映父範圍上的parentModel的值。對parentModel的任何更改都會反映在localModel中，localModel中的任何更改都會反映在parentModel中。