詳細が必要な場合や、何かを明確にしたい場合はお知らせください。私はこれを理解するためにさまざまなことを試みましたが、解決策は見つかりませんでした。AngularJSネストされたディレクティブでの双方向データのバインド
私はangularJSには比較的新しいので、いくつかのレイヤーのデータでアプリを構築しようとしています。私はいくつかの基本的なユーザ情報をController PageControllerのボディのスコープに格納しています。次に、テンプレート用のカスタムディレクティブを含む$ routeParams（コントローラSettingsController）を使用して読み込む設定フォームを作成します。ディレクティブはネストされているので、最初のものの中に2番目のものをロードするために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