angularjs控制器内的路由错误

Question

我有以下angularjs路由设置。

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'); 

视图

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

问题是当我点击链接时，它不会进入编辑页面。 （以下是观察结果）

• 控制台中没有错误
• 我可以看到地址栏中的网址正在发生变化，但很快就会发生变化 回到主页
• 如果我在地址栏中输入http://localhost/#/app/edit/1，则可以
• 它调用editDemo()方法。

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';
}

非常感谢任何帮助。

Answer 1

我更喜欢（防止陷阱）使用$ state服务

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

Answer 2

这里至少有两种方式：

1）从href代码中移除<a>：<a ng-click="editDemo()">Edit</a> 并在editDemo中：

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

2）使用editDemo中的click事件：

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

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