动态更改页面标题AngularJS答案

【问题标题】：Change Page Title Dynamically AngularJS动态更改页面标题AngularJS
【发布时间】：2016-09-01 06:34:36
【问题描述】：

下面是我的代码，我需要通过angularJS点击导航（navlinks）时动态更改h2标签中的主标题。

提前谢谢..

var portfolioApp = angular.module('portfolioApp', []);   

portfolioApp.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {

    $scope.navLinks = [{
        Title: 'home',
        LinkText: 'Home'
    }, {
        Title: 'about',
        LinkText: 'About Us'
    }, {
        Title: 'portfolio',
        LinkText: 'Portfolio'
    }, {
        Title: 'contact',
        LinkText: 'Contact Us'
    }];

    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };   

$scope.maintitle = "Any Title";

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<div ng-app="portfolioApp" 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>

【问题讨论】：

最简单的方法；注入$rootScope 并设置$rootScope.maintitle
你能给我一个代码示例吗？
@Phil 的方式也不错，但我以我所知道的方式编辑了 sn-p 的工作。

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

<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'

【讨论】：

主标题如何在点击导航链接时动态变化。

【解决方案2】：

看看这个：

var portfolioApp = angular.module('portfolioApp', []);   

portfolioApp.controller('navCtrl', ['$scope', '$location', function ($scope, $location) {
$scope.maintitle = "Some Thing";
    $scope.navLinks = [{
        Title: 'home',
        LinkText: 'Home'
    }, {
        Title: 'about',
        LinkText: 'About Us'
    }, {
        Title: 'portfolio',
        LinkText: 'Portfolio'
    }, {
        Title: 'contact',
        LinkText: 'Contact Us'
    }];

    $scope.navClass = function (page) {
        var currentRoute = $location.path().substring(1) || 'home';
        return page === currentRoute ? 'active' : '';
    };
  $scope.goToLink = function(navlink){
    $scope.maintitle = navlink.Title;
    // fix location service accordin to your requirment
    $location.path(navlink.Title);
  }

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<div ng-app="portfolioApp">
<header class="well sidebar-nav">
    <ul class="nav nav-list" ng-controller="navCtrl">
      <h2>{{maintitle}}</h2>

        <li ng-repeat="navLink in navLinks" ng-class="navClass('{{navLink.Title}}')">
            <a ng-click="goToLink(navLink)">{{navLink.LinkText}}</a> 
        </li>
    </ul>
</header>
  </div>

【讨论】：

欢迎告诉我如果您需要更多帮助！

【解决方案3】：

$scope.maintitle = "text you want";

编辑：它无法工作，因为它超出了控制器。我可以建议将它带入控制器，制作另一个控制器或寻找操作超出控制器的项目的方法。

【讨论】：

那超出了控制器的作用域，你得把h2放到控制器作用域内。
我需要在点击导航时动态更改 h2 主标题。
@barha 的回答会奏效。获取控制器内的 h2 元素。