ページのタイトルを動的に変更するAngularJS

Question

以下は私のコードです angularJSを介してナビゲーション（navlinks）をクリックすると、h2タグでmaintitleを動的に変更する必要があります。事前に

おかげ..

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

チェック：

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>

Answer 2

$scope.maintitle = "text you want"; 

EDIT：それはコントローラの外にあるので、それは動作しません。私はそれをコントローラに持ち込むこと、別のコントローラを作ること、またはコントローラ外のアイテムを操作する方法を探すことをアドバイスできます。このうち

Answer 3

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