javascript - 每次单击 ngRoute url 后都会调用 AngularJS Controller

Question

我对下面的代码有问题。当我转到 main Controller url #/ 时，Angular 自然会调用主 Controller - 它执行 AJAX 请求。问题是，当我单击 #/some-url，然后再次单击 #/ url 时，会再次执行此 AJAX 请求，由于性能原因，这是不希望且不必要的。我以为 Controller 只被调用一次，但看起来情况并非如此，至少对于 ngRoute 来说是这样。

angular.module('robotsApp', ['ngRoute', 'controllers'])

    .config(['$routeProvider', function($routeProvider){
        var root = '/static/js/partials/';
        $routeProvider.
            when('/', {
                templateUrl: root + 'main.html',
                controller: 'main as main'
            }).
            when('/some-url', {
                templateUrl: root + 'some_template.html',
                controller: 'someController'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);

angular.module('controllers', [])
    .controller('main', ['$http', function($http){
        $http.get('/user/recent-gain-loss').success(function(data){
            this.recent_gain_loss = data;
        }.bind(this));
    }]);

<p>{{ main.recent_gain_loss }}</p>

Answer 1

将数据保存到一个值中，然后检查数据是否已设置。

angular.module('values', [])
.value('recentGainLoss', {})
angular.module('controllers', ['values'])
    .controller('main', ['$http', 'recentGainLoss', function($http, recentGainLoss){

        if (Object.keys(recentGainLoss).length < 1) {
          $http.get('/user/recent-gain-loss').success(function(data){
            recentGainLoss = angular.extend(recentGainLoss, data);

           });

        }
        this.recent_gain_loss = recentGainLoss;

    }]);