AngularJS $location.path(path) 一开始没有更新 [英] AngularJS $location.path(path) not updating at first

问题描述

我有一段代码，我在其中调用 $location.path(name) 并且似乎没有任何反应(起初).我可以调用 console.log($location.path()) 并且它确实显示新路径——但视图不会改变.

I have a piece of code where I call $location.path(name) and nothing seems to happens (at first). I can call console.log($location.path()) and it does show the new path -- but the view doesn't change.

事件链(一些异步):我有两个控制器(以及匹配的视图)，MainCtrl 和 CpugraphCtrl，以及一个 Service GetDataService 和一个外部数据 API (Google).

Chain of events (some asynchronous): I have two controllers (and matching views), MainCtrl and CpugraphCtrl, and a Service GetDataService and one external data API (Google).

button in Main view calls
 function in MainCtrl that calls
  function in GetDataService that  calls
    google client API gapi.client.load() with a callback to
     function in GetDataService, which uses $rootScope.$broadcast('GraphUpdate',..);

in MainCtrl, $scope.$on('GraphUpdate',function() {..}) calls
  $location.path('cpuGraph');

我可以验证(上面提到的)所有部分都完成了——但视图不会重新渲染.如果我第二次单击该按钮，它会 更改视图并使用我的 CpugraphCtrl 重新渲染.如果我在 $location.path() 之后立即调用 $scope.$apply() 它也会重新渲染(有时)但有时也会报告(在控制台上)angular.js 中的错误....

I can verify (mentioned above) that all the pieces go -- but the view doesn't re-render. If I click the button a second time, it does chnage views and re-render using my CpugraphCtrl. If I call $scope.$apply() right after $location.path() it also re-renders (sometimes) but also sometimes reports (on the console) an error in angular.js....

我应该在其他地方调用 $scope.$apply() 吗?

Should I be calling $scope.$apply() somewhere else?

--- 编辑 -- 添加路由配置 --

--- edit -- adding route config --

angular.module('analytics2App', [
  'ngResource', 'googlechart'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/cpuGraph', {
        templateUrl: 'views/cpuGraph.html',
        controller: 'CpugraphCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

推荐答案

好的，我终于开始工作了.正如我所怀疑的，这是将 $scope.$apply() 放在正确位置的问题.

Okay, at last I got this to work. As I suspected, it's a matter of getting $scope.$apply() in the right place.

Google Analytics 调用在回调内部有一个回调，而内部回调有参数.所以最后我在我的 AngularJS 服务中这样做:

Google Analytics calls have a callback inside a callback and the inner callback has parameters. So in the end I do this inside my AngularJS service:

// this function will be an Angular service (see last line)

var Graphdata = function($rootScope) {
    var gAPIResult;
    // called by apiQuery
    var handle_results = function(results) {
        gAPIResult = results;
        $rootScope.$apply(function() {
            /* ...
            use "gAPIResult" instead of "results" and call
            $rootScope.$broadcast('GraphUpdate', 1);
            on success
            ... */
        });
    };
    var compare_mobile_cpus = function() {
        var queryParams, apiQuery;
        queryParams = { /* could be anything */
            'ids': 'ga:78752930',
            'start-date': '2013-11-07',
            'end-date': '2013-11-09',
            'metrics': 'ga:visits',
            'dimensions': 'ga:EventLabel,ga:date' ,
            'filters': 'ga:eventAction==cputype'
        };
        try {
            apiQuery = gapi.client.analytics.data.ga.get(queryParams);
            apiQuery.execute(handle_results);
        } catch (e) {
            return false;
        }
        return true;
    };
   return {
        init_n_load: function() { // called from the controller
            gapi.client.setApiKey('AIzaSyCGcXFQzom1vE5-s');  // API KEY
            gapi.client.load('analytics', 'v3', compare_mobile_cpus);
        },
    };
};

angular.module('analytics2App').service('Graphdata', Graphdata);

也就是说，init_n_load() 有回调 compare_mobile_cpus() 有回调 handle_results() 包含 $rootScope.$apply()... 并且因为最后一个回调有一个 results 参数，我必须把它藏在服务上在启动 $apply()

that is, init_n_load() has callback compare_mobile_cpus() which has callback handle_results() which contains $rootScope.$apply()... and because that last callback has a results parameter, I have to stash it on the service before launching $apply()

这确实工作...但它是最佳模式吗?保存结果"感觉有点脏.

This does work... but is it an optimal pattern? Saving "results" feels a little dirty.

这篇关于AngularJS $location.path(path) 一开始没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！