javascript - 只有在按F5时AngularJS应用程序才能工作

我有一个无法在导航上运行的应用程序，但仅当我按F5时才可以。我的HTML框架：

   <html>
      <head>
         <script src="static/vendor/angular.js"></script>
         <script src="static/js/myApplication.js"></script>
      </head>
      <body>
         <div ng-app="myApp">
            <div ng-controller="GeneralController">
               ...
            </div>
         </div>
      </body>
   </html>

我的Javascript框架：

angular.module('myApp',[])

    .controller('GeneralController',function($scope,$http,$timeout,$sce) {

        $scope.data = {};

        var load = function() {
            $http.get('services/loadData.php')
                .success(function(res) {
                    $scope.data = res;
                    // more code
                 });
            };
        load();

        // more code
     });

它正常工作，但现在仅在按F5键后才出现，而不是在导航上。自然，它具有更多的代码，为简洁起见，我还排除了其他库。加载页面后，它将呈现输出，并在方括号中显示，而不发出$ http请求。

最佳答案

据我了解，编写代码的方式load()函数仅在创建控制器时运行一次。我假设Angular框架没有重新实例化您的控制器。因此，无论您导航到该控制器多少次，它只会load()一次。我会重构您的代码。

我认为最好的选择是可以使用的是路由的$roueProvider.resolve功能。请参见API documentation。

angular.module('myApp', ['ngRoute']).config(function($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'index.html',
    controller: 'GeneralController',
    resolve: {
      // I will load data from the server and inject it into the controller
      data: function($q, $http) {
        var defer = $q.defer();
        $http.get('services/loadData.php').success(function(res) {
          defer.resolve(res);
        });
       return defer.promise;
      }
    }
  });
});

这会将data属性注入到GeneralController中，您可以将其绑定到其作用域。

angular.module('myApp').controller('GeneralController', function ($scope, data) {
  $scope.data = data;
});

因此，每次将用户路由到您的GeneralController时，在路线导航开始时都会调用'services/loadData.php'。

更新：我写出了这个答案，然后意识到您没有使用ngRoute。因此，您可能会忽略此建议。但是，我不会删除它，以防万一。：/