我遇到了这个问题。所以我有3个控制器：
父控制器：DocumentController 子控制器1：XdataController 子控制器2：CompanyController
我使用子控制器来检索数据以在我的前端表单中填充3个选择器输入。
如何访问控制器填充的这些选择框的值？
目前我正在控制台记录结果，它会打印表单中的所有变量，但子控制器填充的下拉选择器除外。
这是我的代码：
文档控制器：
app.controller('DocumentController', ['$scope', '$http', '$state', '$timeout', '$parent', function($scope, $http, $state, $timeout, $parent) {
$http.get($scope.app.u.api+'secure/doc/all', {headers:{'x-access-token':$scope.app.settings.user.token}})
.then(function(response) {
$scope.documents = response.data;
$http.get($scope.app.u.api+'secure/company/all', {headers:{'x-access-token':$scope.app.settings.user.token}})
.then(function(response) {
$scope.companies = response.data;
})//then
})//then
//add new Document
$scope.addDocument = function(regData){
console.log(regData);
var setter = {
token: $scope.app.settings.user.token,
lender_id: $scope.$parent.regData.lender_id, //ID of one of the subsidiaries in the DB
lender_country: $scope.$parent.regData.lender_country, //Name of one of the 44 countries as a String
borrower_id: $scope.$parent.regData.borrower_id, //ID of one of the subsidiaries in the DB
contract_start: regData.contract_start,
loan_amount: regData.loan_amount,
loan_start: regData.loan_start,
loan_term: regData.loan_term,
interest_rate: regData.interest_rate,
}
/*
$http.post($scope.app.u.api+'secure/doc/new', setter)
.then(function(response){
if(!response.data.success){
$scope.authError = 'Could not access the database';
}else{
$timeout(function(){
$state.reload();
}, 2000);
}
});
*/
};
}]);//controller
公司控制器
app.controller('CompanyController', ['$scope', '$http', '$state', '$timeout', function($scope, $http, $state, $timeout) {
$http.get($scope.app.u.api+'secure/company/all', {headers:{'x-access-token':$scope.app.settings.user.token}})
.then(function(response) {
$scope.companies = response.data;
})//then
}]);//controller
Xdata控制器
app.controller('XdataController', ['$scope', '$http', '$state', '$timeout', function($scope, $http, $state, $timeout) {
$http.get($scope.app.u.api+'secure/xdata/countries', {headers:{'x-access-token':$scope.app.settings.user.token}})
.then(function(response) {
console.log(response);
$scope.countries = response.data;
})//then
}]);
表格
<div ng-controller="DocumentController" >
<h1>Hello from the new documents template</h1>
<h1>Add new document</h1>
<form name="regForm" ng-submit='addDocument(regData);'>
<div class="list-group list-group-sm">
<!-- LENDER DETAILS -->
<div class="list-group-item form-group" ng-controller="SubsidiaryController">
<label>Lender:</label>
<select class="form-control" ng-model="regData.lender_id">
<option value="" disabled selected>Select a borrower from your subsidiaries...</option>
<option ng-repeat="subsidiary in subsidiaries" value="{{subsidiary._id}}">{{subsidiary.legalname}}</option>
</select>
</div>
<div class="list-group-item form-group" ng-controller="XdataController">
<label>Country:</label>
<select class="form-control" ng-model="regData.lender_country">
<option value="" disabled selected>Which country the lender is from?...</option>
<option ng-repeat="country in countries" value="{{ country }}">{{ country }}</option>
</select>
</div>
<!-- BORROWER DETAILS -->
<div class="list-group-item form-group" ng-controller="SubsidiaryController">
<label>Borrower:</label>
<select class="form-control" ng-model="regData.borrower_id">
<option value="" disabled selected>Select a borrower from your subsidiaries...</option>
<option ng-repeat="subsidiary in subsidiaries" value="{{subsidiary._id}}">{{subsidiary.legalname}}</option>
</select>
</div>
<!-- CONTRACT DETAILS -->
<div class="list-group-item form-group" >
<label>When does the contract start? </label>
<input class="form-control" type="date" name="contract_start" ng-model="regData.contract_start">
</div>
<!-- LOAN DETAILS -->
<div class="list-group-item form-group">
<label>What is the Loan Amount (in USD)?</label>
<input type="text" class="form-control" placeholder="Total amount" name="loan_amount" ng-model="regData.loan_amount">
</div>
<div class="list-group-item form-group">
<label>When does the loan start? </label>
<input class="form-control" type="date" name="loan_start" ng-model="regData.loan_start">
</div>
<div class="list-group-item form-group">
<label>What is the term of the loan (in years)?</label>
<select name="loan_term" ng-model="regData.loan_term" class="form-control">
<option value="" disabled selected>Select your loan term...</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 year</option>
<option value="6">6 years</option>
<option value="7">7 years</option>
<option value="8">8 years</option>
<option value="9">9 year</option>
<option value="10">10 years</option>
</select>
</div>
<button type="submit" class="btn btn-lg btn-dark btn-block" ng-disabled='form.$invalid'>Generate Document</button>
</div>
</form>
</div>
答案 0 :(得分：0)
从客户端控制器发出事件并在父控制器中捕获。
app.controller('XdataController', ['$scope', '$http', '$state', '$timeout', '$rootScope',
function ($scope, $http, $state, $timeout, $rootScope) {
$http.get($scope.app.u.api + 'secure/xdata/countries', {
headers: {
'x-access-token': $scope.app.settings.user.token
}
})
.then(function (response) {
console.log(response);
$rootScope.$emit('countries', response.data); // Emit event from child controller
}) //then
}
]);
// Inside DocumentController
$rootScope.$on('countries', (event, data)=>{
console.log(data); // Data from child controller
});
另一个例子
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="OuterCtrl">
<h5>Outer Div</h5>
<div ng-controller="InnterCtrl">
<button ng-click="click()">Inner Div</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('OuterCtrl', function ($rootScope) {
$rootScope.$on('countries', (event,data) => {
alert(data); // Data from child controller
});
});
app.controller('InnterCtrl', function ($scope, $rootScope) {
$scope.click = function () {
$rootScope.$emit('countries', 'Message from inner div');
};
});
</script>
</body>
</html>