Question

当我更改页面并使用location.path（）或其他内容来获取相关的URL片段时，我想更改元素的类。

我使用$ routeProvider进行路由。小提琴没有正确显示它，但它在我的代码中工作正常。我遇到的问题是，当我加载下一页时它不会更新。

此代码获取我想要的url片段：

$scope.locationPath = $location.path().replace(/^\/([^\/]*).*$/, '$1');

这是一个非常简单的JSfiddle： http://jsfiddle.net/timothybone/kmBXv/1/

Answer 1

答案几乎是正确的;你必须将$location.path()包装在一个函数中，以便它在每个摘要上执行，而不仅仅是一次：

$scope.$watch(function () {
  return $location.path();
}, function() {
  return $location.path().replace(/^\/([^\/]*).*$/, '$1');
});

工作小提琴：http://jsfiddle.net/kmBXv/3/

Answer 2

这样的事情怎么样？

$scope.$watch($location.path(), function() {
  return $location.path().replace(/^\/([^\/]*).*$/, '$1');
}

Answer 3

使用$ watch的替代方法：

<li ng-class="{active:isActiveRoute('edit')}">edit</li>
<li ng-class="{active:isActiveRoute('list')}">list</li>

然后在你的控制器中：

$scope.isActiveRoute = function(route) {
   // I added '/' instead of using a regex to remove it from path()
   return '/' + route === $location.path();
};

另见AngularJs: stateful client-side routing，它有一个工作小提琴。

使用URL数据更改AngularJS中的类

3 个答案: