javascript - ui路由器解决问题

Question

我之前发布了这个问题，老实说我不知道​​我做错了什么。我一整天都在努力解决这个问题。

我将发布尽可能多的代码，以便为大家提供尽可能多的详细信息。

我遇到的问题是我登录后尝试加载 3 个 subview 。登录后，我可以看到所有 3 个 subview 都在我的 html 工具检查器中呈现，但在浏览器 View 中部分呈现。经过研究，我认为我的问题是我需要使用一个名为resolve的属性来等待我的所有模板和http完成，然后才能在登录后转换到下一页。

这是登录页面

<ion-view view-title="login">
<ion-content class="padding has-header">
    <div class="row">
        <div class="col col-50 col-offset-25">
            <div class="card">
                <div class="item item-text-wrap">
                    <form ng-submit="processForm()">
                        <div class="list">
                            <label class="item item-input">
                                <input type="text" placeholder="First Name" ng-model="formData.AccessKey" required="true">
                            </label>
                            <label class="item item-input">
                                <input type="text" placeholder="Last Name" ng-model="formData.Password" required="true">
                            </label>
                        </div>
                        <button class="button button-full button-positive">
                            Sign me in
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</ion-content>

这是我的应用程序 js 负责所有路由

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){

    $ionicConfigProvider.views.transition('none')

    $urlRouterProvider.otherwise('/');

    $stateProvider

        .state('login',{
            url: '/',
            templateUrl: 'templates/login.html',
            controller:'loginController'
        })

        .state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            abstract: true
        })

        .state('main.panels', {
            views: {
                'ticketsPanel': {
                    templateUrl: 'templates/ticketsPanel.html'
                },
                'productsPanel': {
                    templateUrl: 'templates/productsPanel.html'
                },
                'categoriesPanel': {
                    templateUrl: 'templates/categoriesPanel.html',
                    controller: 'categoriesController'
                }
            }
        })



})

这是我的服务

angular.module('starter.services', [])

.factory('Authentication', function($http, $q){

var deferred = $q.defer();

return {
    login:  function(formData) {
        $http({
            method  : 'GET',
            url     : 'http://localhost:8888/employees/login',
            params  : formData
        })
        .success(function(respond){

            deferred.resolve(respond);

        })
    },
    getEmployee: function () {
        return deferred.promise;
    }
}


})

.factory('Categories', function($http){

//get the company id so i can get all the categories belong to that company
var CompanyId = JSON.parse(localStorage.getItem('employee'));

CompanyId = CompanyId[0].CompanyId;

return {
    getCategories : function() {
        $http({
            method  : 'GET',
            url     : 'http://localhost:8888/Categories/ajax_getCompaniesCategories',
            params  :  {CompanyId: CompanyId}
        })
        .success(function(respond){
            localStorage.setItem('categories', JSON.stringify(respond));
        })
    }
}
})

这是我的 Controller

angular.module('starter.controllers', [])

.controller('loginController', function($scope, Authentication, $log, $state){
$scope.formData = {};

$scope.processForm = function(){
    Authentication.login($scope.formData);

    var promise = Authentication.getEmployee();

    promise.then(function(respond){
        localStorage.setItem('employee', JSON.stringify(respond));
        $state.go('main.panels');
    })

}

})


.controller('categoriesController', function($scope, Categories){

console.log('categories controller')

Categories.getCategories();

$scope.categories = JSON.parse(localStorage.getItem('categories'));

})

抱歉，我通常尝试只发布一点代码，但我很绝望。提前致谢。

Answer 1

不太清楚您的模板显示为一半...为什么您确定它们的标记正确？

但是您的代码不应该工作。你完全搞砸了处理 promise 。您最好阅读more关于它。

我只会发布应该更改的代码:
不要将现有的 promise 纳入延期 promise 。不要犹豫，返回 promise 。请记住，Promise 应该在链中发挥作用。 IE。 promise.then().then() 也是一个 Promise，您可以在从函数返回后将 .then 附加到它。

.factory('Authentication', function ($http) {
    return {
        login: function (formData) {
            return $http({
                method: 'GET',
                url: 'http://localhost:8888/employees/login',
                params: formData
            });
        }
 //also you don't need any extra functions to return the http response
 //getEmployee was redundant
    }
})

同样的内容适用于类别服务。
此外，在这种情况下，服务不应该了解应用业务逻辑 - 从哪里获取 companyId。它应该接收此信息作为参数。这不是一个令人震惊的事情，而是一个很好的实践。

.factory('Categories', function ($http) {
    return {
        getCategories: function (companyId) {
            //return the promise $http().success() 
            return $http({
                method: 'GET',
                url: 'http://localhost:8888/Categories/ajax_getCompaniesCategories',
                params: {
                    CompanyId: CompanyId
                }
            })
            .success(function (respond) {
                localStorage.setItem('categories', JSON.stringify(respond));
                //this will be parameter of next `.then` handler
                return respond;
            })
        }
    }
})

现在在 Controller 中我们按以下方式使用它

$scope.processForm = function(){
    Authentication.login($scope. formData)
        .then(function(respond){
            localStorage.setItem('employee', JSON.stringify(respond));
            $state.go('main.panels');
        })
    }

在 categoriesController 中，您尝试在异步操作完成之前使用 localStorage.getItem('categories')。因此它始终是空的。你应该等到它完成，这就是 promise 到位的原因。在 .then 处理程序中操作已完成，但是由于从 getCategories 最后一个 .then 处理程序正确返回，我们不需要从 localStorage 获取项目并解析它。我们将对象作为处理程序的参数!

.controller('categoriesController', function ($scope, Categories) {
    //good practice: controller is a proper place to retrieve id for request
    var company = JSON.parse(localStorage.getItem('employee'));
    var companyId = CompanyId[0].CompanyId;
    Categories.getCategories(companyId)
            .then(function (categories) {
                //at this moment localStorage.getItem('categories') is already populated
                //it can be used for later. At the moment we get categories as an argument
                $scope.categories = categories;
            })
})

希望这有帮助