angular - 反映哪个模板加载到视图的元素

Question

我有一个使用 ngRoute 的简单应用程序：它有一个视图，可以根据 URL（#/1 => 第一个模板；#/2 => 第二个模板）加载不同的模板。我添加了 'a' 元素以在这些模板之间切换。

是否可以使 'a' 元素反映所选模板？（例如，根据当前 url 更改其 class）。

<html ng-app="app">
    <a href='#/1'>one</a>
    <a href='#/2'>two</a>
    <div ng-view />
</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.when('/1', {template: 'first template'});
    $routeProvider.when('/2', {template: 'second template'});
    $routeProvider.otherwise({redirectTo: '/1'});
});
</script>

Answer 1

看看 which in essence pretty much is what Vucko 建议中提供的答案。

在我上面链接的 SO 问题中，有很多不同的建议解决方案，您可以真正选择适合您需要和复杂程度的解决方案。

angular - 反映哪个模板加载到视图的元素

angular - element to reflect which template is loaded to a view

href

angularjs

ngroute