我使用组件创建了一个示例angular js app,并尝试从一个Promise加载数据。
这里的问题是当解析了promise时,响应数据没有在UI中更新,如果我执行$scope.$apply()
,则模态正在更新。我试过$ onChanges,但这也没有帮助!
这不是正确的实施,对吧?请提供有关我的代码结构和此问题的说明。
我在这里想念蚂蚁吗?
angular.module('detailapp', ['ui.router'])
.component('app', {
template: `
<div class="container">
<div ui-view></div>
</div>
`
})
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
//Home or Default page
$stateProvider.state('home', {
url: '/',
template: '<div>Home</div>'
});
//details, with id
$stateProvider.state('detail', {
url: '/:id',
template: '<detail-component></detail-component>'
});
})
.service('endPointService', ['$q', '$http', function ($q, $http) {
return {
getDetailUrl: function (id) {
return 'https://api.github.com/users/' + id;
},
get: function (url, params) {
return new Promise(function (resolve, reject) {
$http.get(
url, {
params: params
}
).then(function (res) {
resolve(res);
}).catch(function (err) {
reject(err);
});
});
}
}
}])
.factory('listService', ['endPointService', function listService(endPointService) {
let serviceInstance = {};
serviceInstance.getDetail = function (Id) {
return endPointService.get(
endPointService.getDetailUrl(Id)
).then((res) => {
return res.data;
});
};
return serviceInstance;
}])
.component('detailComponent', {
template: `
<div class="panel panel-default ">
<div class="panel-heading">Detail Component: ID - {{vm.id}}</div>
<div class="row">
<div class="col-md-3 col-xs-3"><strong>Name</strong></div>
<div class="col-md-9 col-xs-9"><span class="text-info pull-left">{{vm.obj.name}}</span> </div>
</div>
<div class="row">
<div class="col-md-3 col-xs-3"><strong>Follow</strong></div>
<div class="col-md-9 col-xs-9"><span class="text-info pull-left">{{vm.obj.followers_url}}</span> </div>
</div>
</div>`,
controller: ['$scope', '$stateParams', 'listService', function detailController($scope, $stateParams, listService) {
let vm = this;
vm.id = $stateParams.id;
vm.obj = {};
vm.$onInit = function () {
/*controller on init */
vm.getDetails();
console.log(`onInit ${JSON.stringify(vm.obj)}`);
};
// vm.$onChanges = function (changes) {
// console.log(`onChanges ${JSON.stringify(vm.obj)} ${JSON.stringify(vm.changes)}`);
// // if (changes && angular.isUndefined(changes.obj.previousValue) && angular.isDefined(changes.obj.currentValue)) {
// // console.log('Changing the modal' + changes);
// // vm.obj = changes.obj.currentValue;
// // }
// };
vm.getDetails = function () {
listService.getDetail(vm.id).then(res => {
vm.obj = res;
$scope.$apply();
console.log(`api call ${JSON.stringify(vm.obj)}`);
});
};
}],
controllerAs: 'vm'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<body ng-app="detailapp">
<div class="container-fluid">
<app>app is loading here...!</app>
</div>
</body>
答案 0 :(得分:0)
在您的服务中,无需创建自定义承诺,因为$ http返回会导致承诺。只需返回请求
.service('endPointService', ['$q', '$http', function ($q, $http) {
return {
getDetailUrl: function (id) {
return 'https://api.github.com/users/' + id;
},
get: function (url, params) {
return $http.get(url)
}
}
}])
再次在工厂中,只需返回服务方法,而不是在那里展开承诺
.factory('listService', ['endPointService', function listService(endPointService) {
let serviceInstance = {};
serviceInstance.getDetail = function (Id) {
return endPointService.get(endPointService.getDetailUrl(Id))
};
return serviceInstance;
}])