AngularJS：如何将$location.path传递到模板中？

Question

我需要在模板中获取当前路径（$location.path的内容），但不想通过控制器来实现，因为我有很多控制器（我不想复制声明 $scope.currentUrl = $location.path;）。感谢您的建议。

需要注意的是，HTML标签应该被保留。

- user1595465

Answer 1

AngularJS模板只能看到scope中可用的内容，因此您需要以某种方式将$location服务放入一个scope中。在AngularJS应用程序中，有一个始终可用的作用域称为$rootScope，因此它可以用于您的用例。

您可以使用模块的run()方法将$location公开在$rootScope中：

var myApp = angular.module('myApp', []).run(function($rootScope, $location) {
    $rootScope.location = $location;
});

这将使得“location”在所有模板中都可用，因此稍后您可以在模板中执行以下操作：

Current path: {{location.path()}}

- pkozlowski.opensource

---

在具有自己作用域的指令模板中，您需要使用 Current path: {{$parent.location.path()}}。 - benweet

使用 {{ $root.location.xxx }} 是一个好习惯，因为任何具有隔离作用域的指令都无法通过简写方法访问它，而 $parent.location 取决于您的作用域深度不可靠。 $root 总是有效的。 - Scott Byers

Answer 2

另一种选择是使用更语义化和多功能的ui-router，然后在控制器中检索当前状态，并将其存储在$scope中：

app.controller('MyCtrl', ['$scope', '$state', function MyCtrl($scope, $state) {
  $scope.state = $state.current.name;
  ...
}

- Dan Dascalescu

---

我认为负评可能是因为即使OP正在使用ui-router（而这个问题本身并不足以迁移），此代码返回状态名称，该名称通常与URL的路径完全不同（它还将包括任何动态参数）。例如，在我的应用程序中，对于路径：“/graphs/56ce3/edit”，您的代码返回状态的名称“edit.graph”。用《夸张的半身人》的话来说，“不，你看，那个解决方案是针对我遇到的不同问题的。” :) - 0x24a537r9

对于使用ui-router的未来读者，您可能需要使用$state.href($state.current)而不是$state.current.name。 - 0x24a537r9