的Javascript

Question

我有一个非常简单的itemController，它包含一个项目数组（实际上，这些是从API获得的）。我想再次调用API以根据从itemForm.item select中选择的内容获取子部分（即获取itemForm.item.id的所有子部分）。

当我选择Item1（id = 1）时，我想更新表单以包含该item.id的子部分。我遇到的问题是如何将itemForm.item.id传递给sectionController。正如你在下面看到的那样，我用$ attrs尝试了它，但最终传递了一串＆＃34; {{itemForm.item.id}}＆＃34;而不是实际值。

我是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并为特定的itemID返回一个JSON数组（在这种情况下为itemID = 1）：

[
  {
    "name": "Section1", 
    "itemID": 1, 
    "sectionID": 1
  }, 
  {
    "name": "Section2", 
    "itemID": 1, 
    "sectionID": 2
  }, 
  {
    "name": "Section3", 
    "itemID": 1, 
    "sectionID": 3
  }, 
  {
    "name": "Section4", 
    "itemID": 1, 
    "sectionID": 4
  }
]

Answer 1

当第一次加载sectionController时，只调用一次SectionService。

如果你希望每次itemForm.item的值发生变化时都调用SectionService，你需要使用$ scope。$ watch来观察对$ attrs.id的更改：

angular.module('app').controller('sectionController', 
['SectionService', '$attrs', '$scope',
function(SectionService, $attrs, $scope){
var store = this;

$scope.$watch(
  function(){ return $attrs.id; },
  function(){
     if($attrs.id){
        SectionService.getSections($attrs.id)
           .then(function(data) {
               store.sections = data;
        }, function(error) {
           // promise rejected
           console.log(error);
        });
     }
  }
}]);

Answer 2

首先，必须 <{1}}使用as表达式，您应该只使用其中一个。

来自docs：

在同一表达式中使用select as和track by时要小心。

我建议你这样使用：

track by

嗯，为了实现你想要的，你必须做一些事情：

使用ngChange指令获取您父<select class="form-control" ng-model="itemForm.item" ng-options="item.name for item in item.items track by item.id" ng-change="item.change(itemForm.item.id)" required>项id的{{1}}：

selected

注入 controller中的ng-change="item.change(itemForm.item.id)";
使用$scope将controllers发送给孩子$broadcast

data

使用controller接收来自父$scope.$broadcast('id', id);的数据：

$on

这是完整的 示例：

controller

$scope.$on('id', function(event, id) {
  ...
});

请注意，我会在代码段中对此处无效的部分发表评论，但它应该适用于您的实际应用。

我还建议你查看tutorial。

AngularJS更新表单，选择并传递参数到控制器

的Javascript

HTML

2 个答案: