Angular $location.path not working as expected

Question

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 !

Answer 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())

Answer 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.