Javascript 动态更改页面标题AngularJS
下面是我的代码, 我需要通过angularJS在点击导航(导航链接)时动态更改h2标记中的主标题 提前谢谢Javascript 动态更改页面标题AngularJS,javascript,jquery,angularjs,angularjs-directive,Javascript,Jquery,Angularjs,Angularjs Directive,下面是我的代码, 我需要通过angularJS在点击导航(导航链接)时动态更改h2标记中的主标题 提前谢谢 var-portfolioApp=angular.module('portfolioApp',[]); portfolioApp.controller('navCtrl',['$scope','$location',函数($scope,$location){ $scope.navLinks=[{ 标题:"家",, 链接文本:“主页” }, { 标题:"关于",, 链接文本:“关于我们”
var-portfolioApp=angular.module('portfolioApp',[]);
portfolioApp.controller('navCtrl',['$scope','$location',函数($scope,$location){
$scope.navLinks=[{
标题:"家",,
链接文本:“主页”
}, {
标题:"关于",,
链接文本:“关于我们”
}, {
标题:“投资组合”,
链接文本:“投资组合”
}, {
标题:“联系人”,
链接文本:“联系我们”
}];
$scope.navClass=函数(第页){
var currentRoute=$location.path().substring(1)| |“home”;
返回页===currentRoute?'active':'';
};
$scope.mainttitle=“任何标题”;
}]);代码>
{{mainttitle}}
-
编辑:它无法工作,因为它超出了控制器。我可以建议将其放入控制器中,制作另一个控制器或搜索操纵控制器外项目的方法。查看以下内容:
<div ng-app="portfolioApp">
<div ng-controller="navCtrl">
<h2>{{maintitle}}</h2>
<header class="well sidebar-nav">
<ul class="nav nav-list" >
<li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')">
<a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a>
</li>
</ul>
</header>
<div>
</div>
var-portfolioApp=angular.module('portfolioApp',[]);
portfolioApp.controller('navCtrl',['$scope','$location',函数($scope,$location){
$scope.mainttitle=“某物”;
$scope.navLinks=[{
标题:"家",,
链接文本:“主页”
}, {
标题:"关于",,
链接文本:“关于我们”
}, {
标题:“投资组合”,
链接文本:“投资组合”
}, {
标题:“联系人”,
链接文本:“联系我们”
}];
$scope.navClass=函数(第页){
var currentRoute=$location.path().substring(1)| |“home”;
返回页===currentRoute?'active':'';
};
$scope.goToLink=函数(navlink){
$scope.mainttitle=navlink.Title;
//根据您的要求提供定位服务
$location.path(navlink.Title);
}
}]);代码>
{{mainttitle}}
-
{{navLink.LinkText}
这超出了控制器的范围,您必须将h2放在控制器范围内。我需要在单击导航时动态更改h2主标题。@barha的答案会起作用。获取控制器内部的h2元素。最简单的方法;注入$rootScope
并设置$rootScope.maintTitle
你能给我一个代码示例吗。@Phil的方法也不错,但我以我知道的方式编辑了代码片段。单击导航链接后,maintTitle将如何动态更改。欢迎告诉我你是否需要更多帮助!
<div ng-app="portfolioApp">
<div ng-controller="navCtrl">
<h2>{{maintitle}}</h2>
<header class="well sidebar-nav">
<ul class="nav nav-list" >
<li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')">
<a href='#/{{navLink.Title}}'>{{navLink.LinkText}}</a>
</li>
</ul>
</header>
<div>
</div>
$scope.maintitle = 'title'