不能使用AngularJS工厂返回的数据
Can't use returned data from AngularJS Factory
我尝试使用http请求在表中显示一些信息。
为此,我创建了一个工厂,并在控制器中调用该工厂。当我验证(与FireBug)如果'$范围。
问题是屏幕上没有显示任何数据。
与简单的赋值,如$scope。showSal =[{…}]它可以工作,但是当我使用factory时它不起作用。
有人可以帮我使用从工厂收到的数据吗?
PS:对于测试,我使用特定的数组返回而不返回响应。数据(但即使我返回响应。数据它有相同的行为)
var app = angular.module("salariesApp", ['ui.bootstrap']);
app.factory('salServ', ['$http', function ($http) {
var showSal = {};
showSal.getItems = function () {
return $http.get('http://localhost:8080/TT2/GetSalariesDetails')
.then(
function (response) {
alert("OK");
return [{ id: '1', an: '2016', den: 'Oracle Romania' },
{ id: '2', an: '2016', den: 'Microsoft' },
{ id: '3', an: '2016', den: 'Computer Generated Solutions - CGS Europe' },
{ id: '4', an: '2016', den: 'IBM' }];
},
function (response) {
alert("NO");
}
);
};
return showSal;
}]);
app.controller('mainCtrl', ['$scope', 'salServ', function($scope, salServ) {
$scope.showSal = salServ.getItems();
console.log($scope.showSal);
$scope.showItems = $scope.showSal;
}]);
HTML代码在这里:
<!DOCTYPE html>
<html>
<head>
<title>Research project</title>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js" data-semver="3.0.0" data-require="jquery@*"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js" data-semver="1.5.7" data-require="angularjs@1.5.7"></script>
<script data-require="ui-bootstrap-tpls-0.12.0.min.js@*" data-semver="0.12.1" src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-controller="mainCtrl" ng-app="salariesApp">
<table class="table">
<thead>
<tr>
<th ng-click="sortBy(id)">Nr. crt.</th>
<th ng-click="sortBy(an)">Anul</th>
<th ng-click="sortBy('den')">Denumirea institutiei/companiei</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableSearch"></td>
<td class="tableSearch">
<input type="text" ng-value="{{crrYear}}" ng-model="searchSal.an" id="inputYear" class="form-control" />
</td>
<td class="tableSearch">
<input type="text" ng-model="searchSal.den" id="inputName" class="form-control" />
</td>
</tr>
<tr ng-repeat="rows in showItems">
<td class="spa-col-md-1">{{rows.id}}</td>
<td class="spa-col-md-2">{{rows.an}}</td>
<td class="col-md-5">{{rows.den}}</td>
</tr>
</tbody>
</table>
</body>
</html>
$http.get()
是异步的并且返回一个Promise
。当您尝试设置$scope.showItems
值时,HTTP调用肯定没有完成。
试
var app = angular.module("salariesApp", ['ui.bootstrap']);
app.factory('salServ', ['$http', function ($http) {
var showSal = {};
showSal.getItems = function (callBack) {
return $http.get('http://localhost:8080/TT2/GetSalariesDetails')
.then(
callBack (response.data),
function (response) {
alert("NO");
}
);
};
return showSal;
}]);
app.controller('mainCtrl', ['$scope', 'salServ', function ($scope, salServ) {
salServ.getItems(
function (data) {
$scope.showItems = data;
console.log($scope.showItems);//or $log...
}
);
}]);
不要相信angular中的console.log函数,因为控制台浏览器可以在加载后获取信息。使用$log代替:)
您可以根据您的作用域值在div包含中添加ng-if,例如:
<table class="table" ng-if="showItems">
只有在showItems
相关文章:
- AJAX调用并在Node中获取返回数据
- 角度服务未返回数据
- 统计ajax返回数据中的html元素
- 有没有更好的方法可以测量从Ajax调用返回数据所需的总时间
- Imgur API图像搜索未返回数据
- javascript对象显示为null,但object.properties返回数据
- 如何从ajax调用JQuery返回数据
- 试图从嵌套的回调函数返回数据
- NodeJS FS 不从多个文件返回数据
- ajax函数未在C#中返回数据
- 如何在公共js模块中从web服务返回数据
- 将字符串与 JSON 对象组合以返回数据
- 嵌套异步函数未及时返回数据的问题
- NodeJS JSONStream 以一个长字符串的形式返回数据
- 如何使用 HTML 图像请求将数据发送到服务器,或返回数据作为响应
- 从 Angular 模态服务中的模态主体模板返回数据
- jQuery 每个循环返回数据两次
- $.getJSON 在返回数据后不会运行函数
- 如何访问返回数据中的特定json值
- 工厂返回数据后未设置角度$scope