如何在进入AngularJS的每个页面上调用http请求？答案

【问题标题】：How to call http request on every page entering in AngularJS?如何在进入AngularJS的每个页面上调用http请求？
【发布时间】：2016-07-23 11:24:54
【问题描述】：

如果我每次返回主页选项卡，如何获得新的 http 响应？

我尝试了几件事。我读到了“$state.reload()”，但我不知道在哪里使用它。 ng-click 在 tabs.html 中不起作用。

控制器：

.controller('HomeCtrl', function ($scope, $http) {
        'use strict';

// how to call this every time on coming back to this tab?
        $http.get("api.php")
            .then(function successCallback(response) {
                $scope.plan = response.data;
            }, function errorCallback(response) {
                console.error("Failed HTTP get: " + response.status + " " + response.data);
            });
// ...

tabs.html

<ion-tabs>
  <ion-tab title="Home" href="#/tab/home">
    <ion-nav-view name="tab-home"></ion-nav-view>
  </ion-tab>
<!-- ... -->
</ion-tabs>

index.html:

<ion-nav-view></ion-nav-view>

模块：

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

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

        .state('tab.home', {
            url: '/home',
            views: {
                'tab-home': {
                    templateUrl: 'templates/tab-home.html',
                    controller: 'HomeCtrl'
                }
            }
        })

非常感谢！

【问题讨论】：

看angular.run，在那里订阅stateChangeStart，在那里提出请求。

标签： angularjs routes state reload

【解决方案1】：

在控制器中

$scope.loadHttp = function(){
        $http.get("api.php")
            .then(function successCallback(response) {
                $scope.plan = response.data;
            }, function errorCallback(response) {
                console.error("Failed HTTP get: " + response.status + " " + response.data);
            });

};

以视图为例

<div ng-click ="loadHttp()">Tab</div>

【讨论】：

因为你没有为你的标签状态指定控制器。
.state('tab', { url: '/tab', abstract: true, controller: 'TabCtrl', templateUrl: 'templates/tabs.html' })
.controller('TabCtrl', function ($scope, $state) { $scope.test = function () { alert("test"); $state.reload(); } }) ;
可能为您的主页/标签创建子状态？

【解决方案2】：

用户选择。

<ion-tab
  title="Home"
  icon="my-icon"
  href="#/tab/home"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

这里是Demo

【讨论】：

我必须删除 tabs.html 并在 index.html 中写入任何内容吗？

【解决方案3】：

现在看来可以了。感谢@praHoc。

我加了3次“缓存”，没有别的。

        .state('tab', {
            url: '/tab',
            abstract: true,
            cache: false,
            templateUrl: 'templates/tabs.html'
        })

        // Each tab has its own nav history stack:

        .state('tab.home', {
            url: '/home',
            cache: false,
            views: {
                'tab-home': {
                    cache: false,
                    templateUrl: 'templates/tab-home.html',
                    controller: 'HomeCtrl',
                }
            }
        })

【讨论】：