1
コンポーネントを持つサンプルのangle jsアプリケーションを作成し、PromiseであるAPIからデータをロードしようとしました。AngularJSコンポーネントのモーダルがPromiseの後に更新されない
私が$scope.$apply()を実行すると、約束事が解決され、応答データがUIで更新されない場合、Modalが更新されます。私は$ 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> \t \t </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> \t \t </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>
に約束をアンラップすることはあなたの例の仕事をしていますか？第一にそれを修正してください。どのように '詳細'に行くのですか？ –