さらに詳しい情報が必要な場合や、何か明確にしたい場合はお知らせください。これを理解するためにさまざまなことを試しましたが、解決策が見つかりませんでした。
私は angularJS に比較的慣れていないので、いくつかのデータ層でアプリを構築しようとしています。コントローラ PageController の body のスコープにいくつかの基本的なユーザー情報が格納されています。次に、$routeParams (コントローラーの SettingsController を使用) を使用して読み込まれる設定フォームを作成します。このフォームには、テンプレート用のカスタム ディレクティブがいくつか含まれています。ディレクティブはネストされているため、トランスクルージョンを使用して最初のディレクティブの中に 2 番目のディレクティブをロードしています。これはすべて問題なく機能しているようです。
私の問題はuser.firstname、最も内側のディレクティブ内からフィールドを参照しようとしていて、双方向のデータバインディングを使用してテキストボックスに加えられた変更を許可し、PageController スコープの値も変更したいことです。この種の問題の多くは ng-model でプリミティブを使用することによって引き起こされることを知っていますが、プロトタイプの継承を無効にするために、すべてを追加のオブジェクト内に配置しようとしました。ここで何が間違っていますか？
これは私のコードの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>
Angular ディレクティブ:
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"
}
}
}
});