AngularJS routing error inside a controller

Question

I have the following AngularJS routing setup.

app.js

.config(function($stateProvider, $urlRouterProvider){
  //some code
  .state('app.edit', {
    url: '/edit/:recipeId',
    views: {
      'menuContent': {
        templateUrl: 'templates/recipes/edit.html',
        controller: 'editRecipeCtrl'
      }
    }
  //some code
});
$urlRouterProvider.otherwise('/app/home');

view

<a ng-click="editDemo()" href='#'>Edit</a>

The problem is when I click the link, it does not go to the edit page. (following are the observations)

No error in the console
I can see the url is changing in the address bar, but it quickly fall-back to the home page
If I type http://localhost/#/app/edit/1 in the address bar , it works
it calls the editDemo() method.

controller.js

$scope.editDemo = function(){
    // options I tried
     
    // $location.path( '/edit/1' );
    // $location.path( '#/app/edit/1');  
    // $location.path( 'edit/1');  
    // $location.url( '/edit/1' );
    // $location.url( '#/app/edit/1' ); 
    // $location.url( 'edit/1');
    // location.href = '/#/app/edit/1';
}

$location.path( '/edit/1' ); should be correct, try passing $event to ng-click callback and call $event.preventDefault() — Rasalom
– Rasalom, Commented Dec 11, 2014 at 13:39
@Rasalom, thanks for the quick answer, I updated the link to div <div ng-click="editDemo()">Edit</div> and code to $location.path( '/edit/1' );, but still doesnt work — sameera207
– sameera207, Commented Dec 11, 2014 at 13:45

Ben Diamant · Accepted Answer · 2014-12-11 13:43:17Z

2

I prefer (to prevent pitfalls) to use the $state service

$scope.editDemo = function(id) {
    $state.go('app.edit', {recipeId: id});
}

answered Dec 11, 2014 at 13:43

Ben Diamant

6,2164 gold badges39 silver badges51 bronze badges

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

Comments

Rasalom · Accepted Answer · 2014-12-11 13:52:23Z

2

You have at least 2 ways here:

1) remove href from <a> tag: <a ng-click="editDemo()">Edit</a> and in editDemo:

$scope.editDemo = function(){
   $location.path( '/edit/1' );
}

2) work with click event in editDemo:

<a ng-click="editDemo($event)" href='#'>Edit</a>

$scope.editDemo = function($event){
     $event.preventDefault();
     $location.path( '/edit/1' );
}

answered Dec 11, 2014 at 13:52

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

1 Comment

sameera207 Over a year ago

thanks @Rasalom, I changed the code to Ben's way and its working now. and I believe its more like angular. But thanks again :)

Collectives™ on Stack Overflow

AngularJS routing error inside a controller

app.js

view

controller.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js

view

controller.js

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related