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

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

动态更改页面标题AngularJS

3 个答案: