Question

我有一个Controller从我的服务中调用一个函数，我只想从web上加载一次数据，并且可能是缓存它（在rootScope中？但是可以等待......）。

我试图在init（）中包装函数调用，但它似乎没有帮助......我每次加载部分时都会看到调用的函数。

也许我的路由有些天真？

这里有一些代码：

app.js

'use strict';

    var tab = angular.module('tab', ['ngRoute', 'tab.controllers', 'tab.services']);

    tab.config(['$routeProvider', function($routeProvider) {
      $routeProvider.

        // a bunch of other logic here

        when('/curate', {
            templateUrl: '_partials/curate.html',
            controller: 'CurateController'
        }).

      otherwise({
        redirectTo: '/splash'
      });
    }]);

controllers.js

// other controllers etc 

.controller('CurateController', function($scope, $routeParams, ParseService) {

  // Here's where I'm trying to call the function once.
  // Obviously, if I don't have this in the init() it also calls every time I route to it
  $scope.init = function () {
    ParseService.getArticles(function(results) {
      console.log("Articles: " + results);
      // do stuff with data here
    });
  };

})

services.js

angular.module('tab.services', []);

angular.module('tab.services')

/* PARSE */

.factory('ParseService', function() {

    // Vars etc

    var ParseService = {
      name: "Parse",


      // The function in question
      getArticles : function getArticles(callback) {
        var query = new Parse.Query(Article);
        query.find({
          success : function(results) {
            callback(results);
          },
          error : function(error) {
            alert("Error" + error.message);
          }
        });
      },

    };


    return ParseService;
});

curate.html

<section>
    <div class="container-fluid" ng-controller="CurateController" ng-init="init()">

        <!-- STUFF -->


    </div>
</section>

Answer 1

您没有展示您的服务。只需将其缓存在服务5644318364acb9f1eb25c939调用

中

$http

---更新

您应该从服务中返回承诺，而不是将回调传递给它。

查看Parse文档，我看不到为您自动缓存数据的方法。

您可以实现自己的缓存机制，我建议您在服务中，而不是在控制器中。

- 编辑2

请记住，服务是单身人士。因此，按照设计，它只会被构造一次。

Answer 2

我确保函数的方式只在每个应用程序调用一次，如数据调用和其他初始化我创建一个名为AppCtrl的控制器并将其放在body标签上。

的index.html

<body ng-controller="AppCtrl">
    <ng-view></ng-view>
</body>

然后在你的控制器js

controllers.js

.controller("AppCtrl", function ($scope, ParseServce) {
    // put your initialization code here
    ParseService.getArticles(function(results) {
        console.log("Articles: " + results);
       // do stuff with data here
    });
});

这可能会解决您的问题。

额外提示，您可以通过将数据存储在私有变量中来缓存数据，因为在您的应用中只声明了1个服务实例，无论您将服务注入任何控制器，指令都会得到相同的数据或其他服务。

services.js

.factory('ParseService', function() {

// Vars etc
var _data = [];
var ParseService = {
  name: "Parse",


  // The function in question
  getArticles : function getArticles(callback) {
    var query = new Parse.Query(Article);
    query.find({
      success : function(results) {
        callback(results);
        // Cache the data
        _data = results;
      },
      error : function(error) {
        alert("Error" + error.message);
      }
    });
  },
  // Get your cached data
  getCachedData: function () {
      return _data;
  }
};

希望有所帮助

确保Angular Controller中的函数仅运行一次

2 个答案: