如何添加类元素，并通过AngularJS改变页面的标题
1个回答
展开全部
1.所述优先可通过利用$ routeParams和所述第二通过ngClass来解决。 下面是一个简单的例子plunker让你开始： 使用Javascriptvar app = angular.module('plunker', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/', { template: '<p>Home page<p>'})
.when('/:title', { template: '<p>Page for {{ name }}</p>', controller: 'MainCtrl'})
.otherwise({
redirectTo: '/'
});
});
app.controller('MainCtrl', function ($scope, $routeParams) {
$scope.$on('$routeChangeSuccess', function (event, current, prev) {
$scope.name = $routeParams.title || 'World';
});
});
HTML<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<h2> Hello {{ name }}!</h2>
<ul class="nav-bar">
<li ng-class="name"><a href="#/Bob">Bob</a></li>
<li ng-class="name"><a href="#/Harry">Harry</a></li>
<li ng-class="name"><a href="#/">Home</a></li>
</ul>
</div>
<div ng-view></div>
</body>
</html>
CSS.nav-bar {
display: block;
width: 100%;
}
.nav-bar li {
display: inline-block;
text-decoration: none;
width: 50px;
}
.Bob {
background-color: yellow;
}
.Harry {
background-color: orange;
}
app.config(function ($routeProvider) {
$routeProvider
.when('/', { template: '<p>Home page<p>'})
.when('/:title', { template: '<p>Page for {{ name }}</p>', controller: 'MainCtrl'})
.otherwise({
redirectTo: '/'
});
});
app.controller('MainCtrl', function ($scope, $routeParams) {
$scope.$on('$routeChangeSuccess', function (event, current, prev) {
$scope.name = $routeParams.title || 'World';
});
});
HTML<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<h2> Hello {{ name }}!</h2>
<ul class="nav-bar">
<li ng-class="name"><a href="#/Bob">Bob</a></li>
<li ng-class="name"><a href="#/Harry">Harry</a></li>
<li ng-class="name"><a href="#/">Home</a></li>
</ul>
</div>
<div ng-view></div>
</body>
</html>
CSS.nav-bar {
display: block;
width: 100%;
}
.nav-bar li {
display: inline-block;
text-decoration: none;
width: 50px;
}
.Bob {
background-color: yellow;
}
.Harry {
background-color: orange;
}
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
