Question

我有一个small tool，使用带有.value()配方的AngularJS，它目前几乎将整个数据库作为JSON转储到此值中。因此，我希望通过在更改视图之前使用$ http按需加载一些此类信息来优化页面。

index.php （丑陋）

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript">
        app.value('MembersListData', <?php echo $MembersListDB; ?>);
        app.value('ChartsData', <?php echo $MembersChartsDB; ?>);
    </script>

app.js

var app = angular.module('CommunityInfo', ['ngRoute', 'chart.js'])
    .config(function ($routeProvider, $httpProvider){
        $routeProvider
            // main page (listing)
            .when('/members', {
                controller: 'MembersController',
                templateUrl: self.location.pathname + '/views/members-list.html'
            })
            // member of the list (load additional data from request.php)
            .when('/member/:memberID', {
                controller: 'MembersController',
                // ----- new code (start) -----
                resolve: {
                    MemberDataDB: function($http, $route){
                        return $http.
                            get(
                                self.location.origin +
                                self.location.pathname +
                                'request.php?rop=info&battleTag=' +
                                $route.current.params.memberID
                            )
                            .then(
                                function(response){
                                    return response.data;
                                }
                            )
                    }
                },
                // ----- new code (end) -----
                templateUrl: self.location.pathname + '/views/member-data.html'
            })
    })


    .factory('MembersFactory', function($http, MembersListData, ChartsData){
        // factory functions & initialization
    })


    .controller('MembersController', 
    function($scope, $routeParams, $location, MembersFactory, MemberDataDB){
        function init(){

            // other initialization

            if (memberID){
                // copy part of the current data
                $scope.memberData = $scope.membersList[memberID];
                if (!$scope.memberData){
                    // member not found - redirect to list
                    $location.path('/members');
                }
                // add the new data
                angular.merge($scope.memberData, MemberDataDB); // new code
            }
        }
        init();
    });

此更改在成员页面上正常工作，但加载列表（主页面）会引发注入器错误：

错误：[$ injector：unpr] http://errors.angularjs.org/1.5.8/ $ injector / unpr？p0 = MemberDataDBProvider％20％3C-％20MemberDataDB％20％3C-％20MembersController

但这些案件似乎都不适用于此

定义了服务（工厂）
模块定义一次
只有一个控制器
仅在控制器中使用$ scope（不完全确定）

我是否在正确的轨道上？是否有其他/更好（和美丽）的方式来做到这一点？

Answer 1

引发错误是因为在主路径中，您尚未定义MemberDataDB resolve变量，尽管您在路由之间共享控制器。因此，MembersController在MemberDataDB路径中不知道/members是什么。试试这个：

 .when('/members', {
            controller: 'MembersController',
            templateUrl: self.location.pathname + '/views/members-list.html',
            resolve: {
              MemberDataDB: function() {return {}};
            }
        })

AngularJS - 解析$ http而不是注入值

1 个答案: