動態更改頁面標題AngularJS

Question

下面是我的代碼，我需要在通過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> 

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

Answer 2

$scope.maintitle = "text you want";

編輯：由於它不在控制器中，它將無法正常工作。 我可以建議將其攜帶到控制器中，再做一個控制器，或者尋找操縱不在控制器中的物品的方法。

Answer 3

簽出此：

 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>