AngularJS $ location.path（路径）起初没有更新 [英] AngularJS $location.path(path) not updating at first
问题描述
我有一块code，其中我调用$ location.path（名）并没有什么似乎发生（起初）。我可以调用的console.log（$ location.path（）），它的确实的显示新的路径 - 但视图不会更改
事件（一些异步）链：
我有两个控制器（和匹配的观点），MainCtrl和CpugraphCtrl和服务GetDataService和一个外部数据API（谷歌）。
按钮在主视图中调用
功能MainCtrl调用
功能GetDataService调用
谷歌客户端API gapi.client.load（）与回调
功能GetDataService，它使用$ $ rootScope广播（'GraphUpdate'，..）。在MainCtrl，$范围。在$（'GraphUpdate'，函数（）{..}）调用
$ location.path（'cpuGraph'）;
我可以验证（上述），所有的作品去 - 但视图不重新渲染。如果我按一下按钮第二次，它的确实的chnage意见，并使用我CpugraphCtrl重新呈现。如果我调用$范围。$适用（）$ location.path（后右）也重新呈现（有时），但有时也报告（在控制台上）在angular.js错误....
我应该调用$范围。$适用（）别的地方？
---编辑 - 添加路由配置 -
angular.module（'analytics2App'，[
'ngResource'，'googlechart'
]）
的.config（函数（$ routeProvider）{
$ routeProvider
。什么时候（'/'， {
templateUrl：意见/ main.html中，
控制器：'MainCtrl
}）
。当（'/ cpuGraph'，{
templateUrl：意见/ cpuGraph.html'，
控制器：'CpugraphCtrl
}）
。除此以外（{
redirectTo：'/'
}）;
}）;
好吧，最后我得到了这个工作。正如我怀疑，这是获得$范围的问题。$适用（）在正确的地方。
谷歌分析通话有所回调回调内，内有回调的参数。所以，最后我做到这一点我AngularJS服务中：
//这个功能将是一个角度的服务（见最后一行）VAR Graphdata =功能（$ rootScope）{
VAR gAPIResult;
//通过apiQuery称为
VAR handle_results =功能（结果）{
gAPIResult =结果;
$ rootScope。$应用（函数（）{
/ * ...
用gAPIResult而不是结果和呼叫
$ rootScope $广播（'GraphUpdate'，1）。
成功
... * /
}）;
};
VAR compare_mobile_cpus =功能（）{
VAR queryParams，apiQuery;
queryParams = {/ *可以是任何东西* /
IDS：GA：78752930'，
开始日期：2013年11月7日，
结束日期：2013年11月9日，
指标：GA：访问，
'尺寸'：'嘎：EventLabel，GA：日期，
过滤器：GA：eventAction == CPUTYPE
};
尝试{
apiQuery = gapi.client.analytics.data.ga.get（queryParams）;
apiQuery.execute（handle_results）;
}赶上（E）{
返回false;
}
返回true;
};
返回{
init_n_load：功能（）{//从控制器称为
gapi.client.setApiKey（'AIzaSyCGcXFQzom1vE5-S'）; // API KEY
gapi.client.load（'分析'，'V3'，compare_mobile_cpus）;
}，
};
};angular.module（'analytics2App'）服务（Graphdata'，Graphdata）。
这就是init_n_load（）有有回调handle_results（回调compare_mobile_cpus（）），其中包含$ rootScope。$适用（）......因为，去年的回调有一个结果的参数，我不得不藏匿它的服务$启动前申请（）
这确实的工作的...但它是一个最佳的模式呢？保存结果感觉有点脏。
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.
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');
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....
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: '/'
});
});
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 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);
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（路径）起初没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
