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

【问题标题】：AngularJS / ui-router: $state.go does not work inside ng-clickAngularJS / ui-router：$state.go 在 ng-click 中不起作用
【发布时间】：2014-01-05 09:51:50
【问题描述】：

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

<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 吗？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案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 是一个带有 ID 属性的对象，您希望将其作为 URL 参数传递。

【讨论】：

我认为这应该是公认的答案。当然，您不能以这种方式将参数传递给状态。
谢谢 - 这让它变得非常好.. 我还意识到您可以非常优雅地更改部分 url 路径 - 即：本质上是通过在状态内导航。示例：您有一个状态 S 的 URL，如下所示：/foo/:aa/:bb/:cc 如果您已经处于该状态，并且路径类似于 /foo/joe/blow/rocks，并且您想将 blow 更改为 sixpack，但不要管其余部分，这只是拥有ui-sref="S({bb: 'sixpack'})" 的问题 - 无需担心其他参数。如果您尝试直接修改$location.path，这将更加困难
干净、简短、简单、甜美。
优秀的解决方案。我唯一遇到的问题是与输入表单配对。用户在表单中输入内容后将无法简单地按 Enter。
@jami0821 所以您想让表单导航到提交时的特定状态？由于您可能正在执行其他一些 onsubmit 处理，因此您可以将 $state.go() 放入该 ng-submit 函数中。如果你真的想在控制器中不做任何事情的情况下尝试这个，以下可能会起作用 - <button type="submit" ui-sref="toState">Submit</button>

【解决方案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;
});

【讨论】：

将这样的属性添加到 $rootScope 通常被认为是不好的做法。
在你真的需要这样的东西的情况下（这种情况不需要它 - 请参阅我的回答），更好的选择是创建一个轻量级指令，该指令接受一个属性值和 $parses它在依赖的上下文中。

【解决方案3】：

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

注入$window Angular JS 服务。
使用javascript的history.back()函数。
完成，如果您只想返回，这是最简单的解决方案。

我不会写完整的 Angular JS。只有重要的代码：

HTML 代码

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

JS-代码

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

【讨论】：