Question

我有一个登陆页面的控制器。我的问题是每当我查看页面时都会再次调用$http，因为该视图的控制器会被执行，导致$http一直执行。

app.controller('landingCtrl', function($scope, $splash, $http, sentiment) {

    //get JSON DATA FROM SERVER 
    var restURL = {};
    restURL.getSentiments = "http://localhost:3000/getSent";

    //get JSON DATA FROM SERVER  
    $http.get(restURL.getSentiments).then(function(res) {
        log(res);
        return res;
    }); /*AJAX ENDS*/

});

有什么方法可以让我只调用$http一次或者有一些控制权，就像我想打电话一样？截至目前，$http总是被执行。

Answer 1

为了保持我的代码干净和结构化，我将这些$ http调用包装在服务中。此外，当您有不同的REST调用时，您需要更改的代码，当您必须编辑api路径时。

以下是一个例子：

'use strict';

angular.module('YourApp')
  .service('Sentiments', function ($http) {
    var sentiments = [];
    var api = 'http://localhost:3000/getSent';

    return {
        all: function(callback) {
            var cb = callback || angular.noop;
            if(sentiments.length !== 0) {
                cb(sentiments);
            }else{
                $http.get(api)
                    .success(function(result) {
                        sentiments = result;
                        cb(result);
                    })
                    .error(function() {
                        cb();
                    })
            }
        }
    }
  })

  .controller('landingCtrl', function ($scope, Sentiments) {        
    Sentiments.all(function(sentiments) {
      $scope.sentiments = sentiments;
    });
  });

Answer 2

让我们从函数编程中找到once。包装函数只被触发一次，因为fn变量用于确保函数只执行一次。

angular.module('app', [])
  .controller('onceCtrl', function($scope, messages) {

    $scope.messages = messages.get()

  }).factory('messages', function($timeout, once) {

    var messages = []

    return {
      get: once(function() {
        $timeout(function() { // some delay to simulate $http request
          messages.push({
            date: Date.now()
          })
        }, 1000)
        return messages
      })
    }


  }).factory('once', function() {
    return function once(fn, context) {
      var result;

      return function() {
        if (fn) {
          result = fn.apply(context || this, arguments);
          fn = null;
        }

        return result;
      };
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="onceCtrl">
    First exection {{ messages }}
  </div>
  <div ng-controller="onceCtrl">
    Second execution {{ messages }}
  </div>
  <div ng-controller="onceCtrl">
    Third execution {{ messages }}
  </div>
</div>

在控制器中只调用一次$ http

2 个答案: