AngularJS组件模式在Promise之后不更新

Question

我创建了一个带有组件的示例angular js app，并尝试从一个Promise加载数据。

这里的问题是当promise被解决时，响应数据没有在UI中更新，如果我使用$scope.$apply() ，则Modal正在更新$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>

Answer 1

在您的服务中，无需创建自定义承诺，因为$ 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;
    }])

AngularJS组件模式在Promise之后不更新

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-05-01 14:25:34

AngularJS组件模式在Promise之后不更新

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-05-01 14:25:34

解决方案1
0 已采纳 2017-05-01 14:25:34