Change the url without reloading the controller in Angularjs

Question

Initially, I am showing all the users name in the table. Once the user selected any one of the name, I call the LoadData method with the selected user as the parameter. I am changing the url #/Trades/User/User1 and append the details under the User1. My requirement is 1) In the LoadData method, I want to change the url to as #/Trades/User/User1 or #/Trades/User/User2 based on the selection 2) It should update the data and reflect in view, but it should not reload the controller.

HTML

<div ng-app="myApp" ng-controller="myCtrl"> 
<table>
    <tr ng-repeat-start="val in data.Titles" class="h" ng-click="LoadData(val.title)">
        <td colspan="2" ng-hide="val.title == undefined">{{val.title}}</td>
    </tr>
    <tr ng-repeat="con in val.details">
        <td>{{con.portfolio}}</td>
        <td>{{con.status}}</td>
    </tr>
    <tr ng-repeat-end>
        <td colspan="2">Load More</td>
    </tr>
 </table>
</div>

Code

angular.module("myApp", [])
    .controller("myCtrl", ["$scope", function ($scope) {

        $scope.data = {"Titles":[{title:"User 1",    
            details: [{portfolio: "Microsoft", status:"Active"},{portfolio:"IBM", status:"Inactive"}]
    }, {title:"User 2",
        details: [{portfolio: "Yahoo", status:"Inactive"},{portfolio: "Google", status:"Active"}]
    }]};

$scope.LoadData = function(id) {
    Change the url as #/Trades/Author/User1
    Load the details of the User1
};
    });

jusopi · Accepted Answer · 2015-05-22 18:17:12Z

1

You could try this. I am using this currently in my project for something very similar. http://joelsaupe.com/programming/angularjs-change-path-without-reloading/

app.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
    var original = $location.path;
    $location.path = function (path, reload) {
        if (reload === false) {
            var lastRoute = $route.current;
            var un = $rootScope.$on('$locationChangeSuccess', function () {
                $route.current = lastRoute;
                un();
            });
        }
        return original.apply($location, [path]);
    };
}])

answered May 22, 2015 at 18:17

jusopi

6,8133 gold badges37 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vijay VSTO Over a year ago

Will it maintain the browser history i.e., whether the back button works

jusopi Over a year ago

In all honesty, I have seen it work sometimes and sometimes not, however the way I am using this, it could be that my other code that is the culprit. I am using this to force modal URL changes while not having to maintain separate states for when the modal is present or not.

Collectives™ on Stack Overflow

Change the url without reloading the controller in Angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related