如何让我的角度控制器重新加载数据答案

【问题标题】：How to get my angular controller to reload data如何让我的角度控制器重新加载数据
【发布时间】：2015-08-15 12:19:40
【问题描述】：

我有一个具有三个视图的 Angular 应用程序。当它加载时，它会运行一些代码来填充 $scope 变量。当我更改视图然后返回控制器时，我希望初始代码再次运行，但它没有。它似乎已被缓存，并且 $scope 变量没有根据发生的情况进行更新。

如何在每次加载视图时强制控制器运行初始化代码？

我的路线：

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
        controller: 'HomeController',
        templateUrl: 'home.html'
    })
    .when('/teach', {
      controller: 'TeachController',
      templateUrl: 'teach.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});

每次点击'/'路由时我想运行的代码：

getSubPools.success(function(data) {
  $scope.userPools = data;
});

完整的控制器：

app.controller('HomeController', ['$scope', '$filter', 'stream', 'removeDroplet', 'qrecords', 'helps', 'get_user', 'updateRecords', 'getSubPools', function($scope, $filter, stream, removeDroplet, qrecords, helps, get_user, updateRecords, getSubPools) {

  get_user.success(function(data) { //get current user
    $scope.user = data;
  });

  getSubPools.success(function(data) {
    $scope.userPools = data;
  });

  stream.success(function(data) {
    $scope.stream = data;
    if ($scope.stream.length === 0) { //determine if user has stream
      $scope.noStream = true;
    } else {
      $scope.noStream = false;
    }
    $scope.getNumberReady(); //determine if any droplets are ready
    if ($scope.numberReady === 0){
      $scope.noneReady = true;
    } else {
      $scope.noneReady = false;
      $scope.stream = $filter('orderBy')($scope.stream, 'next_ready'); //orders droplets by next ready
    }
  });

    $scope.showEditStream = true;
    $scope.showStream = false;
    $scope.rightAnswer = false;
    $scope.wrongAnswer = true;
    $scope.noneReady = false;
    $scope.subbedDroplets = [];
    $scope.focusInput = false;

}]);

【问题讨论】：

路由改变时，每次都会初始化关联控制器。你能把 HomeController 的代码给我看一下吗，我可以帮你解决这个问题，
我已经添加了 Mohan 的信息。
重要的部分是：如果您已经在“/”这个 url 上并且您正试图点击“/”相同的路线。在这种情况下，控制器不会被初始化。为了实现这一点，编写一些函数并广播一个事件。并在 HomeController 中监听该事件。如果我在同一页面上，请告诉我这样我可以为你写 plunker 或 jsfiddle
其实这不是问题。问题是当我从 '/' 转到 '/discover' 并做一些事情时，数据没有得到更新。
您的意思是要在发现视图中更新 $scope.somevariable 并期望在主页视图中更新它。 ?

标签： javascript angularjs

【解决方案1】：

您可以使用 $routeChangeStart 和 $routeChangeSuccess 事件将数据重新加载到控制器中：

https://docs.angularjs.org/api/ngRoute/service/$route

编辑：正如 mohan 所说，这将适用于每次路线更改，您可以创建一个服务来捕获这些事件，并为每条路线广播一个特殊事件。

并在相关的控制器/服务中监听这个事件并重新加载数据

【讨论】：

这不是一个好的解决方案，因为代码将在每个 routeChangeStart 事件上执行。
他可以制作类似情况的状态或使用 angular-ui-router 为每条路线提供不同的行为

【解决方案2】：

如果要强制重新加载，则添加如下点击功能，

注意：这仅在您使用 $stateProvider 时有效

<a href="" ng-click="goToHome()">Home</a>

在控制器中，

$scope.goToHome = function(){
    $state.transitionTo('home', {}, {reload:true});
}

【讨论】：

很遗憾，这些链接超出了应用程序的范围。
有没有可能让一切都进入到角度范围内？
我可以，但只是让一些代码运行似乎有点多。

【解决方案3】：

这里的问题是，在单击“/”链接时，并非所有初始化代码都在重新运行。 Angular 不是调用数据库来获取新数据，而是返回旧数据。我解决这个问题的方法是重写我的工厂。失败的工厂是这样写的：

app.factory('stream', ['$http', function($http) {
  return $http.get('/stream/')
  .success(function(data) {
    return data;
  })
  .error(function(err) {
    return err;
  });
}]);

每次工作的工厂都写了：

app.factory('stream', ['$http', function($http) {
  return {
    fetch: function () {
      return $http.get('/stream/');
    }
  }
}]);

现在它每次都运行。我不知道为什么。

【讨论】：