控制器内的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>

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

• 控制台没有错误
• 我可以看到地址栏中的 url 正在改变，但它很快 返回首页
• 如果我在地址栏中输入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) 从<a> 标签中删除href：<a ng-click="editDemo()">Edit</a> 并在editDemo中：

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

2) 在editDemo中处理点击事件：

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

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