Question

我正在使用离子框架，这是我的代码

<ion-side-menus>
    <!-- Center content -->
    <ion-nav-bar class="bar-positive nav-title-slide-ios7 has-tabs-top">
        <ion-nav-buttons side="left">
            <button class="button button-icon icon ion-navicon" ng-click="toggleDrawer()">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-side-menu-content>
        <ion-view title="Home Page">
            <ion-content>
                hello
            </ion-content>
        </ion-view>
    </ion-side-menu-content>

    <!-- Left menu -->
    **
    <--below is common code in all files --->**

        <drawer side="left">
            <ion-nav-bar class="bar-stable nav-title-slide-ios7 has-tabs-top">
                <ion-nav-buttons side="left">
                    <button class="button button-icon icon ion-navicon" ng-click="toggleDrawer()">
                    </button>
                </ion-nav-buttons>
            </ion-nav-bar>

            <ion-view title="Categories">
                <ion-content>
                    <ion-list>
                        <ion-item data-ng-repeat="category in categories">{{category.category_name}}</ion-item>
                    </ion-list>
                </ion-content>
            </ion-view>
        </drawer>
</ion-side-menus>

以下代码在所有文件中很常见

<ion-list>
    <ion-item data-ng-repeat="category in categories">{{category.category_name}}</ion-item>
</ion-list>

和控制器

.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    $http({
        url: 'getCateogroies.php',
        method: 'GET',
        withCredentials: true,
    })
    .success((function(data) {
        $scope.categories = data;
    })
    .error(function(data) {
        alert("Login failed");
    })
});

现在问题是它在每个页面加载时发送服务器请求。因为我们已有列表，所以我想发送一次。

我们怎么做？

由于

Answer 1

您可以使用factory作为provider来访问任何控制器中的数据。

.factory('shareData', function($http) {
    var data = "undefined";
    return {
        getValueFromServer: function() {
            //your HTTP call
            data = your_response_object;
        },
        displayValue: function() {
            return data;
        }
    }
});

因此，在您的主控制器中，您将注入工厂并调用getValueFromServer()并获取数据并将其存储在工厂data中声明的var中。然后通过调用displayValue()：

获取值

.controller('MainCtrl', function($scope, shareData) {
    shareData.getValueFromServer();
    $scope.display_t = shareData.displayValue();
})

在其他控制器中，您只需要拨打displayValue()：

.controller('OtherCtrl', function($scope, shareData) {
    $scope.display_again = shareData.displayValue();
})

我创建了一个有工厂的Codepen - http://codepen.io/keval5531/pen/ZGEZMw

Answer 2

您应该将$ http移到服务中并将服务注入控制器。

.service('categoryService', ['$http', function ($http) {
    function getCategories(){
        return $http(/*your request here, withouth the .success, .error*/);
    }

    return{
        getCategories: getCategories
    }
}]);

然后在你的控制器中：

.controller('MainCtrl', ['$scope','categoryService',function ($scope, categoryService) {
    categoryService.getCategories().then(function(success){
        $scope.categories = success.data;
    })
}]);

在离子中编写代码的最佳方法是什么？

2 个答案: