angularjs – 如何在$stateProvider的“解析”中使用工厂？

发布时间：2020-12-17 07:09:07 所属栏目：安全来源：网络整理

导读：作为标题,我想使用工厂insisde“解决” app.js： angular .module("goHenry",["ui.router"]) .factory("httpPost",httpPost) .controller("MainCTRL",["$scope",MainCTRL]);function MainCTRL($scope,httpPost){ this.nameApp = "CiaoMiao"; console.log($sc

作为标题,我想使用工厂insisde“解决”
app.js：

angular
    .module("goHenry",["ui.router"])
    .factory("httpPost",httpPost)
    .controller("MainCTRL",["$scope",MainCTRL]);

function MainCTRL($scope,httpPost){
    this.nameApp = "CiaoMiao";
    console.log($scope.children,httpPost);
}

function httpPost($http,$q){
    return {
        get: function() {
             var deferred = $q.defer();
             $http.post.apply(null,arguments)
                       .success(deferred.resolve)
                       .error(deferred.resolve);
         return deferred.promise;
        }
    }//RETURN
}

routers.js：

var httpConfig = {headers:{ "Content-Type" : "application/x-www-form-urlencoded" }};

    var config = ["$urlRouterProvider","$stateProvider",function($urlRouterProvider,$stateProvider){

        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state("multi",{
                url: "/multi","viewA@multi": {
                        templateUrl: "app/templates/login.htm",controller: ["$scope","getChildrenNumber",function($scope,getChildrenNumber){
                            this.nameApp = "nameAppChanged";
                            this.gatto = "Miao";
                        }],controllerAs: "ctrl"
                    }
                },resolve: {
                    getChildrenNumber: ["$http",function($http,httpPost){
                        var httpP = httpPost.get("http://domain.com/user/login/api-login",$.param({ username:"ciaociao6@ciao.com",password:"ciaociA0" }),httpConfig)
                        console.log(httpP);
                        return "Some response from an API";
                    }]
                }
            });
angular
    .module("CiaoMiao")
    .config(config);

作为console.log的结果,我得到了“未定义”,我不知道如何在代码的这一部分注入该工厂.
我试图放入该视图的主控制器,但它没有工作.

解决方法

(如果您将决心放在您的视图中,它应该有效.
如果需要在同一状态的多个视图中解析.我会尝试使用抽象状态并在那里添加解析.)工作但不需要(请参阅下面的编辑.)

请查看此jsfiddle或以下演示.

我稍微减少了演示,以便更容易阅读.在演示中也没有为DI添加数组表示法.
您不需要在工厂中使用延迟对象,因为$http已经返回了一个promise.

编辑：
您可以将解决方案放在视图之外,它也应该可以工作.我在fiddle试过了.
所以你的代码中可能存在不同的问题.

好吧,我认为您的代码存在的问题是您没有从承诺中返回已解析的值.像promise.then(function(response){return response;});

angular.module('demoApp',['ui.router'])
    .factory('myDataFactory',function ($http) {
    return {
        get: function (id) {
            return $http.post('http://crossorigin.me/http://www.mocky.io/v2/55a65562b2016ce10c7e6ea9',{
                id: id
            }).then(function (response) {
                return response;
            });
        }
    };
})
    .config(function ($urlRouterProvider,$stateProvider) {
    $urlRouterProvider.otherwise('/124');

    $stateProvider.state('home',{
        url: '/:id',views: {
            'viewA': {
                template: '{{hello}}',controller: 'homeController',resolve: {
                    backendData: function (myDataFactory,$stateParams) {
                        return myDataFactory.get($stateParams.id);
                    }
                }
            },'@': {
                template: 'main view'
            }
        }

    });
})
    .controller('homeController',function ($scope,backendData) {
    console.log(backendData);
    $scope.hello = backendData;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="demoApp">
    <div ui-view=""></div>
    <div ui-view="viewA"></div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!