Question

我使用组件创建了一个示例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>

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 个答案: