私は非常に単純なitemControllerを持っています。これにはアイテムの配列が含まれています(実際にはAPIから取得されます)。 itemForm.item select(itemForm.item.idのすべてのサブセクションを取得)から選択された項目に基づいてサブセクションを取得するには、APIを再度呼び出す必要があります。AngularJSは、コントローラへの選択と渡しのパラメータでフォームを更新します。
Item1(id = 1)を選択すると、そのitem.idのサブセクションを含むようにフォームを更新したいとします。私が抱えている問題は、sectionControllerにitemForm.item.idをどのように正確に渡すかということです。以下に見られるように、私は$ attrsで試しましたが、実際の値の代わりに "{{itemForm.item.id}}"の文字列を渡してしまいます。
私はAngularを初めて使っていますが、これはまったく間違った方向に進んでいる可能性が高いので、私のアプローチでは完全に根本的に外れているかどうか教えてください。
のJavascript
angular.module('app').controller('itemController', function(){
this.items = [
{
"id": 1,
"name": "Item1"
},
{
"id": 2,
"name": "Item2"
},
{
"id": 3,
"name": "Item3"
}
];
}];
angular.module('app').controller('sectionController',
['SectionService', '$attrs',
function(SectionService, $attrs){
var store = this;
SectionService.getSections($attrs.id)
.then(function(data) {
store.sections = data;
}, function(error) {
// promise rejected
console.log(error);
});
}]);
HTML
<div class="form-group" ng-controller="itemController as item">
<select ng-model="itemForm.item" ng-options="item as item.name for item in item.items track by item.id" required>
</select>
<!-- this is just a test to try to get the behavior to work correctly -->
<div ng-controller="sectionController as section" id="{{$itemForm.item}}">
<p ng-repeat="section in section.sections">{{section.name}}</p>
</div>
</div>
SectionServiceは単にAPIを呼び出し、そのような特定のアイテムIDは、この(アイテムID = 1この場合)としてJSON配列を返すファクトリであります:
[
{
"name": "Section1",
"itemID": 1,
"sectionID": 1
},
{
"name": "Section2",
"itemID": 1,
"sectionID": 2
},
{
"name": "Section3",
"itemID": 1,
"sectionID": 3
},
{
"name": "Section4",
"itemID": 1,
"sectionID": 4
}
]