我有一个使用路由的应用程序,我正在使用我的第一条路线。视图正确加载,我能够访问链接到视图的控制器中的数据对象,但不能访问控制器中的函数中创建的对象。以下是代码段:
HTML:
<div>
<label>Select Table : </label>
<select ng-init="permits.lookups.selectedLookup = lookupLists[0].list" ng-model="permits.lookups.selectedLookup" ng-options="lookupList.list as lookupList.desc for lookupList in lookupLists" ng-change="populateLookup(permits.lookups.selectedLookup)"></select>
Selected lookup: {{permits.lookups.selectedLookup}}
<table>
<tbody>
<tr><td>first row</td></tr>
<tr ng-repeat="column in columns"><td>{{column.name}}</td></tr>
<tr><td>last row</td></tr>
</tbody>
</table>
</div>
JS:
(function() {
var app = angular.module('lookups',[]);
app.controller('UpdateLookups', function($scope, $http) {
var lookups = this;
$scope.lookupLists = [
{list : "0", "desc" : "--Select List--"},
{list : "del_type", "desc" : "Delivery Type"},
{list : "pay_type", "desc" : "Payment Types"},
{list : "trans_type", "desc" : "Transaction Type"}
];
$scope.selectedLookup = $scope.lookupLists[0].list;
$scope.populateLookup = function(lookup) {
$http({
url : <some URL>
dataType : "json",
method : "POST",
data : "action=3&lookup="+lookup,
headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=utf-8"}
}).success(function(data) {
if ( angular.isArray(data.columns)) {
lookups.columns = data.columns;
} else {
lookups.columns = [data.columns];
}
}).error(function(error){
alert("There was an error");
});
};
});
})();
加载后,使用lookupLists对象中的数据正确初始化选择选项,当用户更改所选选项时,ng-change指令成功触发populateLookup函数,该函数成功填充lookups.columns对象。问题是我很难将lookups.columns对象与我的表中的ng-repeat指令绑定。我试图使用columns,lookups.columns和permits.lookups.columns引用该对象,但我似乎无法访问它。
我尝试在我的主控制器中做类似的事情,经过研究,我发现如果我创建了一个变量并为其分配了“this”,那么在创建我的对象时引用该变量,它就起作用 - 我的假设是“this”的赋值有效地允许函数在范围之外的范围内分配对象。我试图通过创建查找来做到这一点,但这似乎没有帮助。我可以看到lookups.columns确实是创建的,但它不在控制器的$ scope中。我只是在学习AngularJS(请保持温和),并且仍然试图绕过所有绑定和范围限制。我猜我的答案是建立一个服务/工厂并注入它,但当我尝试根据我见过的所有例子做到这一点时,它打破了我工作的部分,所以我回到这个起点,至少其他一切都有效。
答案 0 :(得分:0)
也许你忘了'column'变量前面的'$ scope'。
像这样:$scope.populateLookup = function(lookup) {
$http({
url : <some URL>
dataType : "json",
method : "POST",
data : "action=3&lookup="+lookup,
headers : {"Content-Type" : "application/x-www-form-urlencoded; charset=utf-8"}
}).success(function(data) {
if ( angular.isArray(data.columns)) {
$scope.columns = data.columns;
} else {
$scope.columns = [data.columns];
}
}).error(function(error){
alert("There was an error");
});
};