ui-路由器 $state.go VS ui-sref 让我在 AngularJS 中发疯

Question

通过 ui-sref

调用时有效

<a class="button" ui-sref="main.create">

但是当使用 ng-click 和 $stage.go 调用它时，它会被调用并呈现页面，但我的 $urlRouterProvider.otherwise 将再次覆盖 DOM。我在一步一步调试的时候注意到了。它可能认为 main.create 是一个不存在的 url.

这里是 ng-click 的代码和函数。

<a href="#" ng-click="create()">Create Object</a>

这里是 create() 函数

$scope.create = function() {
  $state.go('main.create');
};

使用ng-click="create()"时调用$state.go('main')。但在它调用 $state.go('main') 之前，我在 DOM 中看到正确的 main.create 页面呈现。我写了 "IF" 语句来处理不存在的 url 所以他们被重定向回主页。这是我的 config.js。

  .state('main', {
    url: '/',
    views: {
      '@': {
        templateUrl: 'app/main/main.html',
        controller: 'MainController'
      },
      'content@main' : {
        templateUrl: 'app/main/main.display.html'
      }
    }
  })

  .state('main.create', {
    url: '/create',
    views: {
      'content@main' : {
        templateUrl: 'app/main/main.create.html'
      }
    }
  })

  $urlRouterProvider.otherwise(function ($injector) {
  var Session = $injector.get('Session');
  var $state = $injector.get('$state');
  if (Session.isAuthenticated()) {
    $state.go('main'); // <-- this is what gets called when using ng-click and after main.create partial gets rendered
  } else {
    $state.go('login');
  }
});

Answer 1

发生这种情况是因为您在同一个锚标记上触发了一个动作和一个路由。在 <a href="#" ng-click="create()"> 中，您不需要同时出现 href 和 ng-click。将其更改为 <a ng-click="create()">，或者如果需要 href，请将其设置为空，例如 <a href="" ng-click="create()">.

Answer 2

Claies 是正确的，问题是由于在同一标签上同时具有 href 和 ng-click，但正确的解决方案是确保您的 $scope.create() 函数 returns 在调用 $state.go 后立即设置一个假布尔值，然后 href 可以是任何你想要的，并且会被忽略。

通常（即使在 angular 之外），如果锚标记同时具有 href 和点击事件处理程序，它将同时执行它们，首先是点击事件处理程序，然后是 href -- 除非 click 事件处理程序 returns 为 false 值，否则它会有效地取消 href 执行。正如您所指出的，不同的浏览器执行 href="#" and/or href="" 的方式不同，但如果您的 $scope.create() 函数 returns false，这将不是问题。

ui-路由器 $state.go VS ui-sref 让我在 AngularJS 中发疯

ui-router $state.go VS ui-sref is making me nuts in AngularJS

angularjs

angular-ui-router