AngularJS控制器在嵌套控制器中不起作用 [英] AngularJS Controller not working in nested Controller
问题描述
有一个关于选择选项值的问题，我可以在选择选项更改时获取值，但是我无法通过搜索按钮获取选择选项的值，它只会给出一个值未定义.那么问题出在哪里呢?
Got a questions regarding the select option value, i can get the value as the select options changed, but i am not able to get the value of the select options thru the search button, it will just give a value undefined. So where is the problem?
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>
controller.js
.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);
}
});
推荐答案
如果要从范围访问值，则必须确保它在该范围内或在其祖先的范围内.现在，您的 ng-model 在子作用域中声明.如果要从父作用域访问它，则需要在父作用域中声明它.这样，当模型更改时，它在父范围中更改了，因此在两个范围中都可以访问:
If you want to access a value from a scope, you've got to make sure it's in that scope or in the scope of it's ancestors. Now your ng-model is declared in the child scope. If you want to access it from the parent scope, you'll need to declare it in the parent scope. That way when the model get changed, it changed in the parent scope and thus accessible in both scopes:
工作示例:
angular.module('App', []);
angular.module('App').controller('ControllerParent', [
'$scope',
function ($scope) {
// Model value declared in parent scope
$scope.selected = {};
}
]);
angular.module('App').controller('ControllerChild', [
'$scope',
function ($scope) {
$scope.options = [{
id: 1,
name: 'Alpha'
}, {
id: 2,
name: 'Bravo'
}, {
id: 3,
name: 'Charlie'
}, {
id: 4,
name: 'Delta'
}];
}
]);<!DOCTYPE html>
<html ng-app="App">
<head>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
</head>
<body ng-controller="ControllerParent">
<div ng-controller="ControllerChild">
<select ng-model="selected.value" ng-options="option.name for option in options"></select>
ControllerSub: {{selected}}
</div>
ControllerMain: {{selected}}
</body>
</html>失败示例:
angular.module('App', []);
angular.module('App').controller('ControllerParent', [
'$scope',
function ($scope) {}
]);
angular.module('App').controller('ControllerChild', [
'$scope',
function ($scope) {
// Model value declared in child scope
$scope.selected = {};
$scope.options = [{
id: 1,
name: 'Alpha'
}, {
id: 2,
name: 'Bravo'
}, {
id: 3,
name: 'Charlie'
}, {
id: 4,
name: 'Delta'
}];
}
]);<!DOCTYPE html>
<html ng-app="App">
<head>
<script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
</head>
<body ng-controller="ControllerParent">
<div ng-controller="ControllerChild">
<select ng-model="selected.value" ng-options="option.name for option in options"></select>
ControllerSub: {{selected}}
</div>
ControllerMain: {{selected}}
</body>
</html>后代作用域可以访问其祖先的值.祖先无权访问其后代的值.
Descendant scopes have access to the values of their ancestors. Ancestors don't have access to values of their descendants.
这篇关于AngularJS控制器在嵌套控制器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
