如果您需要更多信息或需要澄清任何內容,請讓我知道。我已經嘗試了很多不同的東西來解決這個問題,但還沒有找到解決方案。嵌套指令中的AngularJS雙向數據綁定
我是相對較新的angularJS,我試圖建立一個應用程序與幾個層的數據。我有一些基本的用戶信息存儲在控制器PageController正文的範圍內。然後我有一個設置窗體,使用$ routeParams(帶有控制器SettingsController)加載,其中包含一些用於模板目的的自定義指令。由於指令是嵌套的,因此我使用transclusion來加載第一個指令。這一切似乎都工作正常。
我的問題是,我試圖從最內部的指令中引用字段user.firstname
,並希望使用雙向數據綁定來允許對文本框所做的更改導致PageController作用域的值也發生更改。我知道很多這樣的問題是由ng模型中的原語引起的,但我試圖將所有內容都放在一個額外的對象中,以便我觸發原型繼承無濟於事。我在這裏做錯了什麼?
這裏是我的代碼JSFiddle,儘量剝離以隔離問題。在這個例子中,如果我輸入外部文本框,它直接在PageController範圍內,它將修改內部文本框,直到該文本框被修改,連接被中斷。這看起來像使用其他問題中描述的基元的問題,但我無法弄清楚問題出在哪裏。
HTML:
<body class="event-listing" ng-app="app" ng-controller="PageController">
<div class="listing-event-wrap">
<input type="text" ng-model="user.firstname" />
<div ng-controller="SettingsController">
<section block title="{{data.updateInfo.title}}" description="{{data.updateInfo.description}}">
<div formrow label="{{data.updateInfo.labels.firstname}}" type="textInput" value="user.firstname"></div>
</section>
</div>
</div>
</body>
角指令:
app.directive('formrow', function() {
return {
scope: {
label: "@label",
type: "@type",
value: "=value"
},
replace: true,
template: '<div class="form-row">' +
'<div class="form-label" data-ng-show="label">{{label}}</div>' +
'<div class="form-entry" ng-switch on="type">' +
'<input type="text" ng-model="value" data-ng-switch-when="textInput" />' +
'</div>' +
'</div>'
}
});
app.directive('block', function() {
return {
scope: {
title: "@title",
description: "@description"
},
transclude: true,
replace: true,
template: '<div class="page-block">' +
'<h2 data-ng-show="title">{{title}}</h2>' +
'<p class="form-description" data-ng-show="description">{{description}}</p>' +
'<div class="block-inside" data-ng-transclude></div>' +
'</div>'
}
});
角控制器:
app.controller("PageController", function($scope) {
$scope.user = {
firstname: "John"
};
});
app.controller("SettingsController", function($scope) {
$scope.data = {
updateInfo: {
title: "Update Your Information",
description: "A description here",
labels: {
firstname: "First Name"
}
}
}
});
感謝您的快速響應!我嘗試了小提琴,但它似乎和我發佈的一樣。將其更改爲功能隔離範圍的目標是什麼? – princjef
我添加了refobj,所以你不需要在指令中調用'firstname',因爲我確定你希望這是通用的。 – Nir
這真的很聰明!沒有想過使用數組符號而不是點。這將符合我的需求。謝謝! – princjef