Question

我越来越熟悉ui-router并使用 .then 而不是 .success 。但是，我在通过服务解决方面遇到了一些困难。目前，解决方案是阻止访问控制器。我的目标是在每个用户被选中时获取个人信息。

我通过ui-router wiki https://github.com/angular-ui/ui-router/wiki#resolve引用了解决方案。 翻译2似乎与我使用服务的方式类似

    (function() {
        'use strict';

        angular
            .module('app.orders')
            .config(config);

        function config($stateProvider) {
            $stateProvider
                .state('orders',{
                    url:'/customers:customerId', 
                    templateUrl: './components/orders/orders.html',
                    controller: 'OrdersController',
                    controllerAs: 'ctrl',
                    resolve: {
                        customerFactory: 'customerFactory',
                        customerId: function( $stateParams, customerFactory) {
                            return customerFactory.getCustomers($stateParams.id);
                        }
                    }
            })
        };
})();

我在 customerId of resolve 中引用服务调用这是我传递给ordersController的内容。

这是我的服务，让我的客户。

    (function() {
    angular
        .module('app.services',[])
        .factory('customersFactory', customersFactory);

    function customersFactory($http, $log, $q) {

        return {
            getCustomers: getCustomers
        };
        function getCustomers(){
            var defer = $q.defer();
            return $http.get('./Services/customers.json',{catch: true})
                .then(getCustomerListComplete)
                .catch(getCustomerListFailed);

                function getCustomerListComplete(response) {
                    console.log('response.data',response.data);
                    // defer.resolve(response.data);
                    return response.data;
                }

                function getCustomerListFailed(error) {
                    console.log('error', error);
                }
        }
    }
}());

这是我的控制器。它现在非常小。我希望先访问它。我确实已经注入了customerId。

(function() {
    // 'use strict';
    angular
        .module('app.orders')
        .controller('OrdersController', OrdersController);

    function OrdersController($stateParams, customerId) {
        console.log(customerId);
            var vm = this;
            vm.title = "Customer Orders";
            vm.customer = null;
    }
}());

*******更新*****

我在使用ng-Route时发现了一些代码。在这里，我使用$ route，就像我希望使用$ stateParams一样。

 resolve: {
            cityDetails:['cacFindCountry','$route', function(cacFindCountry,$route){
                var countryCode = $route.current.params.countryCode;
                console.log('cityDetails',cacFindCountry(countryCode))
                return cacFindCountry(countryCode);
            }],
            countryNeighbors : ['cacFindNeighbors','$route', function(cacFindNeighbors,$route) {
                var countryCode = $route.current.params.countryCode;
                // pushes country code into neighbors
                return cacFindNeighbors(countryCode);
            }],
            countryDetails : ['cacCountries', '$route', function(cacCountries, $route) {
                 var countryCode = $route.current.params.countryCode;
                 console.log(countryCode);
                console.log(cacCountries(countryCode));
                // need to get specific country info
                // return cacCountries(countryCode);
                return countryCode;
            }]
        }

将服务传递给ui-router的决心，以避免发出$ http请求

0 个答案: