Javascript AngularJS控制器在嵌套控制器中不工作

有一个关于选择选项值的问题，我可以在选择选项更改时获取该值，但我无法通过搜索按钮获取选择选项的值，它只会给出一个值

未定义

。那么问题出在哪里呢

index.html

<div ng-controller="MatIncListCtrl">
  <button class="fluid labeled icon blue ui button top attached"><i class="ellipsis vertical icon"></i>Toggle Filters Pane</button>
  <div class="ui attached segment" uib-collapse="isCollapsed">
    <form role="form" class="ui form">
      <div class="fields">
        <div class="twelve wide field" ng-controller="DistinctSupplierCtrl">
          <label>Supplier</label>
          <select ng-model="Supplier" class="ui fluid dropdown" ng-options="x.supp_no as x.supp for x in data" ng-change="selectAction()">
            <option></option>
          </select>
        </div>
      </div>
    </form>
    <br />
    <button type="button" class="ui orange fluid labeled icon button" tabindex="0" ng-click="FindMatInc()"><i class="search icon"></i>Search</button>
  </div>
</div>

---

如果要从作用域访问值，必须确保它位于该作用域或其祖先的作用域中。现在您的

ng模型

在子范围中声明。如果要从父范围访问它，则需要在父范围中声明它。这样，当模型发生更改时，它在父范围内发生更改，因此可以在两个范围内访问：

工作示例：

angular.module（'App'，[]）；
角度。模块（'App'）。控制器（'ControllerParent'[
“$scope”，
职能（$范围）{
//在父作用域中声明的模型值
$scope.selected={}；
}
]);
角度。模块（'App'）。控制器（'ControllerChild'[
“$scope”，
职能（$范围）{
$scope.options=[{
id:1，
名称：“阿尔法”
}, {
id:2，
名字：“好极了”
}, {
id:3，
名字：“查理”
}, {
id:4，
名称：'Delta'
}];
}
]);

ControllerSub:{{selected}}
控制器名：{{selected}}
使用
控制器as
语法处理嵌套控制器的另一种方法



AngularJS教程
角度模块（'app'，[]）；
角度.module（'app'）.controller（'MainController'，function（）{
var vm=this；//本例中的vm表示viewmodel
vm.title='AngularJS嵌套控制器示例'；
});
角度。模块（'app'）。控制器（“分包商”，功能（）{
var vm=这个；
vm.title=‘副标题’；
});
{{main.title}
{{sub.title}}
如果我们没有使用ControllerAs语法，那么使用title两次就会有问题


.controller('DistinctSupplierCtrl', function($scope, $http) {
  $scope.selectAction = function() {
    console.log($scope.Supplier);
  };
  var xhr = $http({
    method: 'post',
    url: 'http://localhost/api/list-distinct-supp.php'
  });
  xhr.success(function(data){
    $scope.data = data.data;
  });
})

.controller('MatIncListCtrl', function ($scope, $http) {
  $scope.FindMatInc = function (){
    console.log($scope.Supplier);
  }
});