自定義分層AngularJS指令與雙向綁定

我想使用兩個自定義指令構建一個CRUD表單。第一個（crudForm）是主窗體指令，它包含應用於此窗體的所有控件（textboxes，textareas，複選框等），其中包含的第二個控件（一個或多個）是用於定製控件的指令包括在表格中。我想將單個對象綁定到主指令（crudForm），並將對象的每個字段綁定到crudForm中的一個子指令。例如，我在我的$scope定義的對象爲$scope.obj = { "order_id":20, "total": 44.50, "info": "..." }，並有一個表格來編輯它像自定義分層AngularJS指令與雙向綁定

<crud-form key-field="order_id" entity="obj"> 
    <control type="money" field-name="total" field-title="Total"></control> 
    <control type="textarea" field-name="info" field-title="Information"></control> 
</crud-form>

我有一個完整的例子here。

問題是我想自動將主控制器中的對象綁定到表單，然後將每個字段綁定到控件，以便在輸入發生更改時對象綁定將會更改以及。我不能這樣做，因爲就我在控制檯日誌中看到的而言，控件的鏈接函數在表單的鏈接函數之前執行，因此在執行控件的鏈接函數時，綁定到窗體鏈接函數的對象並不是一成不變的。

任何想法？

來源

2013-10-01 Andres Rovira

這裏是一個修改Plunkr中（只）total的輸入工作，並綁定到obj：http://plnkr.co/edit/OjEzjZeUC2yTKkaoFEoP

刪除從form.js該代碼（這是引發錯誤無論如何，因爲你不能像訪問實體此）：

element.find('[rel=input]').on('change', function() { 
    $scope.$parent.entity[$scope.field.name] = $(this).val(); 
}).val($scope.$parent.entity[$scope.field.name]);

將此添加到的crudForm控制器代碼：

this.getEntity = function() { return $scope.entity; };

在指令control從

post: function($scope, element, $attrs) {

此改變了鏈接函數聲明，因此增加了父控制器的引用。

post: function($scope, element, $attrs, parentCtrl) {

順便說一句：寫$scope爲scope和$attrs作爲attrs。這些論點是固定位置的，並不是按名稱神奇地工作的。所以避免混淆。

然後我說這個代碼鏈接功能control：

$scope.entity = parentCtrl.getEntity();

然後我固定的script.js（要設置不同的密鑰比你index.html中引用！）作爲一個例子改變將代碼從money.tpl.html這樣：

<div class="input-prepend"> 
    <span class="add-on">{{ field.options.symbol }}</span> 
    <input type="text" id="field-{{ field.name }}" class="input-small" rel="input" ng-model="entity[field.name]"/> 
</div>

這裏的變化是ng-model="entity[field.name]"。正如你所看到的那樣，只要在你的子指令中使用實體並直接綁定到被引用的屬性/對象，就可以進行修改。沒有實際需要複製任何值。

來源

2013-10-01 03:26:31

這樣做的工作，謝謝 –

自定義分層AngularJS指令與雙向綁定

回答

相關問題