AngularJS / ui-router：$ state.go在ng-click中不起作用

Question

我有一个视图，我有以下代码：

<input type="button" value="New Post" ng-click="$state.go('blog.new-post')">

目标是在不必使用href的情况下转换到新状态。不幸的是，上面的代码并没有触发。

我还尝试在控制器中为此视图包含$ state：

app.controller('blogPostsController', function($scope, $stateParams, $http, $state) ...

但仍然没有。 transictionTo似乎也不起作用。

任何人都知道如何使这项工作？

编辑：我只能通过分配：

来使其工作

$scope.$state = $state;

在我的控制器内。这看起来很难看。没有其他方法可以访问$ state而不将其分配给范围？

Answer 1

如果您使用的是ui-router，则可以按以下方式使用名为ui-sref的属性：

<a ui-sref="blog.new-post"></a>

我建议使用它并将链接设置为按钮样式（如果您使用的是像Twitter Bootstrap这样的CSS库，则可以轻松完成）。然后，在编写链接时，您不需要乱用任何JavaScript。

如果需要将参数传递到状态，可以执行以下操作：

<a ui-sref="blog.edit-post({id: item.id})"></a>

其中$ scope.item是一个具有您希望作为URL参数传递的ID属性的对象。

Answer 2

根据https://github.com/angular-ui/ui-router/wiki/Quick-Reference#note-about-using-state-within-a-template，您可以将其添加到$rootScope，因此它将在所有范围内提供，因此所有模板都可用，

angular.module("myApp").run(function ($rootScope, $state, $stateParams) {
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
});

Answer 3

最简单的解决方案是使用$ Window Service和旧方法

1. 注入angular JS的 $ window 服务。
2. 使用javascript的 history.back（）功能。
3. 完成，如果您只是想回去，这是最简单的解决方案。

我不会写整个角度JS。只有重要的代码：

<强> HTML码

<button ng-click="$ctrl.goBack()">Go Back</button>

<强> JS-代码

self.goBack = function(){ $window.history.back(); };