确保Angular Controller中的功能仅运行一次

Question

我有一个从我的Service调用函数的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

您没有显示您的服务。 只需将其缓存在服务$http调用中

$http.get(url, { cache: true}).success(...);

- - 更新

您应该从服务中返回承诺，而不是向其中传递回调。

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

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

-编辑2

请记住，服务是单例的。 因此，根据设计，它只会被构造一次。

Answer 2

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

的index.html

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

然后在您的控制器中

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
    });
});

那可能会解决您的问题。

温馨提示，您可以通过将数据存储在私有变量中来在服务内部缓存数据，因为在您的应用中仅声明了服务的一个实例，因此无论您将服务注入到任何控制器，指令或其他服务的位置，都可以获得相同的数据。

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 个解决方案

解决方案1
1 已采纳 2015-11-12 06:19:46

解决方案2
1 2015-11-12 06:51:14

确保Angular Controller中的功能仅运行一次

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-11-12 06:19:46

解决方案2 1 2015-11-12 06:51:14

解决方案1
1 已采纳 2015-11-12 06:19:46

解决方案2
1 2015-11-12 06:51:14