Angularjs, Redirect views from controller

Question

I'm new to angularJS. I'm using angularjs to implement a website. The website has two pages. The first page list all items and if user click on it, it will redirect to detail information page.

I have my routes configure as below:

var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
    .when("/list", {
        templateUrl : "list.html",
        controller  : "listCtrl"
    })
    .when("/detail/:id"){
        templateUrl : "detail.html"
    }
});

In the list.html. I use ng-repeat to display a list of items and a listener on to listen mouse click.

<ul class="list-group">
    <li class="list-group-item" ng-repeat="i in items">{{i.name}}
      <a href="#" ng-click="goToEdit($index)">
        <span class="glyphicon glyphicon-pencil"></span>
      </a>
    </li>
</ul>

I want to redirect view to detail information in the ng-click function. I tried $location.path() but it not working.

$scope.goToEdit = function(index){
      console.log($location.path());
      $location.path("/detail/" + index);
      console.log($location.path());
}

This way won't work. Even though the second log on console show location.path() has been changed to " /detail/id".

If I add $scope.$apply() after $location.path(); Then I will get a action already in progress error.

Do you have any solution???

Thanks

let me see your controller, what are you injecting?

Michel Arteta
– Michel Arteta

2016-10-05 22:11:34 +00:00
Commented Oct 5, 2016 at 22:11 — Michel Arteta
– Michel Arteta, Commented Oct 5, 2016 at 22:11
Can you reproduce the problem in a Plunker?

Phil
– Phil

2016-10-05 22:11:48 +00:00
Commented Oct 5, 2016 at 22:11 — Phil
– Phil, Commented Oct 5, 2016 at 22:11

charlietfl · Accepted Answer · 2016-10-05 22:16:06Z

1

It might have something to do with use href="#" which is not good when using hash based routing

You could just set the href yourself and don't really need the controller function or ng-click

<a ng-href="#/detail/{{$index}}" >

Note that you should really give each item a unique identifier as $index could change due to using filters in ng-repeat or removing data from array

Also you don't have a controller identified for your second route

answered Oct 5, 2016 at 22:16

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

5 Comments

Phil Over a year ago

Becomes a pain if you're using HTML5 mode, then you don't need the # prefix. Another reason why I like ui.router better

charlietfl Over a year ago

@Phil totally agree ui-sref makes it much simpler and html5Mode agnostic

Phil Over a year ago

Using $location.path should be HTML5 mode agnostic too. I can't see a reason for OP's code not to work

charlietfl Over a year ago

@Phil agree unless the hash is wigging out ngRoute ...easy enough to preventDefault too I guess

Phil Over a year ago

Ah yeah, didn't think of that. It probably is just redirecting to # from the href.

Collectives™ on Stack Overflow

Angularjs, Redirect views from controller

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related