问题
I am triggering a URL change using $location.path with parameters, however those parameters are NOT getting passed to the target page.
My source page is sidebar.html, and my target page is dashboard.html.
In my sidebar.html I render a Kendo UI treeview widget as follows :
<span id="treeview" kendo-tree-view="tree"
style="color:white;"
k-template="vm.treeItemTemplate"
k-options="vm.treeOptions"
k-data-source="vm.reportsTree"
k-on-change="vm.onTreeSelect(kendoEvent)">
</span>
and in my sidebar.js I set vm.treeItemTemplate with a click event:
vm.treeItemTemplate = "<a href='\' ng-click='vm.treeItemClick(this)'> {{dataItem.text}} </a>";
then once I click on the treeview item in the browser, I trigger the vm.treeItemClick event to change the URL and eimit the "reptname" parameter:
vm.treeItemClick = function (item) {
console.log("tree view clicked !");
$location.path('/index.html').search({reptname:'MTM'});
}
This is quite painful, and I would appreciate some advice.
I need use the Kendo treeview object in my left nav bar to allow the user to select a variety of report options, which in turn will redirect to the dashboard.html with specific "reptname" parameter values.
Now when I break on $location.path() inside sidebar.js (using Chrome dev tools), I clearly see the correct URL property on the $location object.
$location
LocationHashbangUrl {$$protocol: "http", $$host: "localhost", $$port: 49479, $$parse: function, $$compose: function…}
$$absUrl: "http://localhost:49479/index.html#/index.html?reptname=MTM"
$$host: "localhost"
$$parse: function (url) {
$$path: "/index.html"
$$protocol: "http"
$$replace: false
$$rewrite: function (url) {
$$search: Object
$$url: "/index.html?reptname=MTM"
__proto__: Object
However, once it's REDIRECTED to dashboard.html (which is defined in my routes as url:"/"), I DO NOT see the parameter list in the $location object, nor in the $routeParams object.
This is where I'm stuck !
----- UPDATE -------
When I manually refresh the index.html page with parameters, the $location object contains the parameters.
ex/ URL: Link entered manually
However if I redirect from sidebar.js using $location.path('/index.html').search({reptname:'MTM'});
, I get nothing !
回答1:
If you see the parameter in the console but not in your executing code, it might be because Chrome tends to evaluate the console.log with a bit of delay, enought for the async requests to finish and have the data populated, therefor it's not a reliable way of debugging.
Can you listen for the $viewContentLoaded event to be fired and then check the path? That is the view is fully loaded and all variables should be set (including $location.path())
回答2:
I'm not getting any real answers on this issue, so I ended up solving it this way:
In the Source page, sidebar.js, I have defined the treeview's onSelect event() :
function onTreeSelect(e) {
vm.selectedReport = e.sender._current.text();
$location.url('index.html#/?reptname=' + vm.selectedReport);
}
and on the target page, dashboard.js i read the query string using the hash() method:
vm.reptNameParam = $location.$$hash.split("=");
It seems that $location.url() is the ONLY way I can successfully redirect with a parameters list. Using $location.path() does NOT work for me; meaning, I cannot read the query string in my target page using $location.hash() or any other method as it returns an empty string.
来源:https://stackoverflow.com/questions/24791938/angular-location-path-not-working-as-expected