AngularJS & UI路由器:为什么$state.go()和$location.path()不能在交互控制台中工作？

Question

参见这个柱塞：https://run.plnkr.co/mTN6nIsUkxFtiZLx/#/state1

https://plnkr.co/edit/KYQG3OMPoCthEDcus12Y?p=info

它基本上是UI路由器文档中展示的演示代码。为了以编程方式测试状态之间的导航，我制作了使用$state.go(stateName)和$location.path(stateUrl)的控制器函数，它们都工作得很好。

控制器的代码：

myApp.controller('mainController', ['$scope', '$state', '$location',  function($scope, $state, $location) {
  $scope.usingState = function() {
    console.log('usingState() called');
    $state.go('state2');
  };
  $scope.usingLocation = function() {
    console.log('usingLocation() called');
    $location.path('/state2');
  };
}]);

但是，在交互式控制台(developper工具)中，它不起作用。如果我这样做的话：

$state = angular.element(document).injector().get('$state');
$state.go('state2');

或

$location = angular.element(document).injector().get('$location');
$location.path('/state2');

什么都没发生。为什么？

我希望能够在交互式控制台…中进行快速测试。

Answer 1

上面提到的代码似乎是在控制台上工作的。在柱塞中，您不能从文档中获取injector对象，因为柱塞程序在<iframe>中运行代码，加载角。

若要测试功能，请打开UI路由器示例应用程序。在控制台中输入下面的代码并观察状态转换：

angular.element(document).injector().get('$state').go('about');

更新：

在您提供的柱塞中，我将角版1.1.5更改为1.2.0(在1.1.5之后发布的版本)，一切似乎都很好。下面是1.2.0-rc.3和1.2.0的变更集，这可能有助于您跟踪为什么它在以前的版本中没有工作。

更新柱塞。希望这能有所帮助！